Add loading in the begining

[another]

What would be best idea(s) to add loading animation as the first thing to do, for example as Linkedin has: https://www.linkedin.com/feed/

What would be the fastest option to trigger the loading animation, rather for to be a dalay and then as the page is already half way loaded, the loading visual appreas, but very first thing?

Thanks!

[boston85719]

I don’t fully understand the question, but I think you are asking if it is better to put the loader first, or after the page has loaded halfway.

I think it is normally the first thing.

[another]

Exactly! “Page is loaded” workflow is good start.

Is there another way, before the workflow? As for me, when you click on a link, there is white screen for a bit, before the index (one-page app) is started to be visible.

Otherwise, is there any other “ligher” way then the workflow? Or the workflows are the first triggered, specifically by being as the first work flow on the page?

[boston85719]

When you first click and prior to page user is sent to starts to load (ie: page is loaded workflow) there is likely an event the user is navigating away from to show a loading screen, something much easier to achieve with smooth ui when done on single page apps, since user is not leaving and then loading pages, but instead hiding/showing containers.

You can hide/ show in various ways, but my preference is through URL data in conditionals.

Either way, you can think that first action in the series after the trigger of button click would be to show a loader, then depending on app structure, navigate to new page, which also needs to show a loader with trigger of page is loaded, or if single page app the next step after showing loader would be to hide container and show new container then hide loader.

[inspire-labs]

We achieved this by using a floating group, set to 100% by 100%, that is shown automatically (i.e., not hidden). Then, add a conditional => “when page is loadded (full)” such that the element is not visible. (i.e., the floating group preloader is the first thing they see, and since it is a floating group the size of the viewport, it covers everything until the page is loaded, then you hide it)