perf: why is loading-container not removed after hide()?

[dbaq]

Type: perf

Platform: all

Hey guys,

quick question: why is the div.loading-container not removed after $ionicLoading.hide()?

I am not sure if it affects a lot the performances, but that triggers light-gray frames in the timeline of the chrome developer tools.

what was the choice behind? do you know if it affects the global performances?

Thank you for your answers.

[mhartington]

@perrygovier, any ideas about this?

[marcsyp]

+1

As a note, I have been having major performance issues and even crashing when using the $ionicLoading service with a template containing the spinning icon. Spent all day tracking it down and finally alleviated the crashing by not using the spinner.

[perrygovier]

Removing it, we'd have to add it back in when a button or something is clicked again. Adding and removing elements from the DOM is expensive and can, even if they're hidden, trigger a reflow in some older browsers, so we try not to do it if it's not necessary.

If there's a way to eliminate the noise in the timeline, sweet, but I don't think we want to introduce a possible performance problem just to clean up logs. Thoughts?

[dbaq]

IMHO, you should juste use display:none instead of playing on the visibility. I guess you are using the visibility to do a smooth entrance of the loading with an animation. But with a spinning icon, the visibility:hidden is not enough, the icon is still spinning even though it is not visible and triggers light-gray frames (so triggers repaint right?)

why do you think about the display:none?

[marcsyp]

I also want to chime in again to point out that I have really bad crashing
problems when using a spinner in the ionicLoading service, and no such
crashing problems when just using plain text. So, not making any claims,
per se, but it may be more of an issue than just cleaning up logs. That
has been my experience, anyway.

Cheers,
Marc

On Tue, Sep 2, 2014 at 11:53 AM, Perry Govier notifications@github.com
wrote:

Removing it, we'd have to add it back in when a button or something is
clicked again. Adding and removing elements from the DOM is expensive and
can, even if they're hidden, trigger a reflow in some older browsers, so we
try not to do it if it's not necessary.

If there's a way to eliminate the noise in the timeline, sweet, but I
don't think we want to introduce a possible performance problem just to
clean up logs. Thoughts?

—
Reply to this email directly or view it on GitHub
#2013 (comment).

Marc Syp, Creative Technologist
San Francisco, CA

WARNING: The information contained in this message is legally
privileged and proprietary information intended only for the use of
the individual or entity named above. If the reader of this message is
not the intended recipient, you are hereby notified that any
dissemination, distribution, or copy of this message is strictly
prohibited. If you have received this message in error, please
immediately delete the original message and notify the sender.
Communication of the information contained in this message to any
unauthorized persons may be a violation of state or federal laws.

[chaffeqa]

@marcsyp just off the top of my head, I wonder if maybe a good solution would be to use a CSS spinner instead of an icon.

May play better with visibility: hidden

Would love to dig into that, once this pressing project is over one of my goals is to give back to the ionic community, and I have some ideas for the $ionicLoader I would love to contribute... but until then 😦

[perrygovier]

display:none to display:block affects how content stacks. Now the loading backdrop covers the whole screen, but changing that property still triggers a reflow (repaint). In general, visibility:hidden is less likely to cause a reflow that would interrupt and other animations or cause a flicker.

This seems like it's breaking in to multiple issues.

To the original point, the animated spinner even when visibility is none, still triggers regular reflows, albeit tiny ones. Time to fix.

[dbaq]

Thanks @perrygovier! 🍻

[dbaq]

Thanks! I'll test that before the end of the week.

[dbaq]

With the latest nightly, I confirmed, there is no more light-gray frames triggered in the timeline. Thank you @perrygovier

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.