rin
commented
5 years ago Love this! The other day I played around with this idea and rendered an empty table to show while loading the real table (the empty table was a react component though, which is not a good way to do it – I would prefer CSS)
~I landed here because I wanted to suggest to do the Loading component that we have in Portal now into Blueprint. It's an animated spinner that darkens the whole page, but there should be the option to only apply it to part of the page (if you could already interact with other components while one is loading).~
~Not sure if this should be part of this issue, because I guess an animated loading spinner (that we already have) is smaller scope than what the issue describes …?~
UPDATE: Sorry, I just noticed that the Loading component is already part of Blueprint, we're just not using it from Blueprint in Portal.
Why is this component a good candidate for Blueprint? React lifecycle includes a loading phase where most of the components are just a "shell" until the data is loaded. This is also applicable for images as they take longer to load.
Describe the solution you'd like Add loading animations on image placeholders in the same way as facebook. Example here --> https://dev.to/skptricks/facebook-loading-animation-using-css3-1o1i . This should also work for default layouts like grids, comments, etc.
Describe alternatives you've considered We can use some prerender mechanisms but this doesn't take the fact that we would need animations to show that is still loading. Same for images, having a css placeholder animation would reduce the impact
Additional context aimementoring.com/stories is the best example of a UX experience in loading that we can enhance. Another example is when you login in the portal and there's a big loading screen just stopping you to read or interact with any of the content until everything is loaded.