Swag-for-dev: Display loading gif while content is being loaded on the website

[plibither8]

• [x] I've checked that this isn't a duplicate issue.

On (relatively) slower internet connections, there is upto a 5-7 second delay from when the website frontend (title text and footer) has loaded to when the content (the JSON data and images) has finally loaded. I suggest we display a 'loading' GIF until the files have been downloaded (using event listeners) so that the page doesn't look blank, and the user waits.

[aslafy-z]

Maybe we could use some placeholder loading animation to preallocate some space for the swag items. It could be made with https://github.com/zalog/placeholder-loading

[plibither8]

That looks nice! Mind if I take this issue?

[aslafy-z]

Sure, go ahead !

[plibither8]

@aslafy-z @swapagarwal Is this enhancement still required? @aslafy-z did a great job with #59, which I believe should not cause the problem for which this issue was originally created.

[aslafy-z]

I think this is still needed as it can take some times to load the data.json file depending on connection. We should at least add a text placeholder Loading... while loading the data.json.
Also, I tried to integrate https://afarkas.github.io/lazysizes/ but I'm not sure we need it.
In order to ditch this wait time, Maybe we could server-render a part of the data.json list, and then update it in js when it's fully loaded.

[plibither8]

Maybe we could server-render a part of the data.json list

Oh boy, it would be great if we could get this happening... on netlify. Two advantages I can thinking of off the top of my head:

1. Shorter load time and less lag
2. Better for SEO as the actual swag items and the content will be allowed to be crawled by search engines.

[aslafy-z]

It could be done on website deployment (gulp pipeline), as adding swag triggers netlify deployment right ?

[swapagarwal]

If the gulp pipeline can build the static site, that would be perfect! So basically the layout of the items / cards along with the text / description can be prerendered and only images need to be loaded on page load.

[swapagarwal]

@plibither8 Let me know if you think we still need this after image optimization and SSR. 😇

[vikaspotluri123]

@plibither8 I think we can close this? With all of the improvements we've made over the last month or so, I don't think a loading indicator is necessary anymore 🎉

[plibither8]

Supremely sorry for the delay :neutral_face:! Certainly, this is not needed anymore. I'll close it.