Twitch TV api assignment question. Loading experience

1

I finished Twitch TV api assignment http://codepen.io/Anastasyya/full/NdZWRw/ But I don’t like how the page loads. It starts with totally empty page and then Twitch images jump out. I am sure many pages now use api and load content with js, but I don’t remember seeing any page that would behave like mine.

How can I make loading experience nicer? Should I add placeholders? And how can I add placeholders if I don’t know the amount of images that will be loaded?

Any suggestions or recourses where I can read about making loading experience nicer are much appreciated!

2

You could try using a loader placeholder while the APIs are being retrieved. You can use CSS to make them and insert them as a div where the content will go. Then when the content has finished loading you just change the css display to blank to remove it.

I did this for my weather app and I think it worked well.

2 Likes
3

Thank you, @jimbomags ! I will try that. Can you give a link to your weather app, so I can see your example?

4

And I used this link to help code it: https://www.w3schools.com/howto/howto_css_loader.asp

2 Likes