Problem: Loading data from different API calls was taking a lot of time to load. Without any visual cues, the user could mistaken the time it takes for the content to load as the app not working properly. When we resorted to use a spinner animation to indicate the loading process, it made the app look slower than it was. Also, it felt annoying have to keep waiting on the spinner to finish before you could use the app.

Solution*:*** We used simple html placeholders and styled it to look (relatively) like what our content would look normally. We would load this empty placeholders first and animate it to indicate the loading process and when the content from API was finally ready, we swap out the empty placeholders with real content. Hence giving the effect that app was much more responsive and that the waiting time felt much shorter compared to the spinner animation.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/da90e357-1d4f-414a-a038-ec2ff5137d34/home_loading.mov

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c4753202-6ee3-4526-98f3-d4a89b5d9eb3/apps_loading.mov

CSS:

@keyframes placeHolderShimmer {
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}

.placeholder_animation {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #eeeeee;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 800px 104px;
    position: relative;
}