What would be best idea(s) to add loading animation as the first thing to do, for example as Linkedin has: Sign Up | LinkedIn
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?
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.
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)