Shimmer UI: A Better Way to Show Loading States
If you have ever used a web or mobile app that takes some time to load data from a server, you might have seen a loading spinner or a progress bar that indicates that something is happening. While these are common ways to show loading states, they are not very engaging or informative for the user. They don’t tell the user what kind of content is being loaded, how long it will take, or what to expect next.
A better way to show loading states is to use a shimmer UI. A shimmer UI is a version of the UI that doesn’t contain actual content, but instead mimics the layout and shapes of the content that will eventually appear. It uses a gradient animation that creates a shimmering effect over the placeholders, giving the user a sense of motion and progress.
A shimmer UI has many benefits over traditional loading indicators:
- It improves the perceived performance of the app by making it seem faster and more responsive.
- It reduces the cognitive load on the user by providing visual cues about the type and structure of the content that is being loaded.
- It eliminates surprises and confusion by showing a consistent and predictable UI before and after loading.
- It enhances the aesthetic appeal and user satisfaction by creating a smooth and elegant transition from loading to loaded.
How to implement a shimmer UI
There are different ways to implement a shimmer UI depending on the platform and framework you are using. For example, if you are using React, you can use the Shimmer package which provides a component that creates a shimmer effect over any component. You can also use the ShimmerLoading component that automatically switches between a shimmer UI and a content UI based on a boolean flag.
If you are using Microsoft Fluent UI for Shiny, you can use the Shimmer component that creates a temporary animation placeholder for when a service call takes time to return data. You can wrap your content node with a Shimmer element and use the isDataLoaded prop to trigger the transition.
If you are using HTML and CSS, you can create your own shimmer UI by using some basic techniques such as:
- Creating placeholder elements that match the size and shape of your content elements
- Applying a linear gradient background to your placeholder elements
- Animating the background position of your gradient to create a shimmering effect
- Hiding your placeholder elements and showing your content elements when data is loaded.
Examples of shimmer UI
Here are some examples of shimmer UI in action:
- Facebook uses shimmer UI to show loading states for posts, comments, stories, and other elements in its app and website.
- LinkedIn uses shimmer UI to show loading states for profiles, articles, jobs, and other elements in its app.
- Netflix uses shimmer UI to show loading states for movies, shows, genres, and other elements in its app.
- Youtube uses shimmer UI to show loading states on the landing page.
- Swiggy and Zomato use shimmer UI to show loading states on the landing page on their website and apps.
Conclusion:
Shimmer UI is a better way to show loading states in your web or mobile app. It improves the user experience by providing visual feedback, reducing cognitive load, eliminating surprises, and enhancing aesthetic appeal. It can be implemented using different platforms and frameworks such as Flutter, Microsoft Fluent UI for Shiny, or HTML and CSS. Next time you need to show loading states in your app, consider using a shimmer UI instead of a spinner or a progress bar.
