Web apps with too many loading screens really mess with the user experience. We've all been there, staring at those screens waiting for content, and it's frustrating. It makes the user's experience feel slowand disjointed. The Zesty.io Manager web app suffered from this as well. Users got hit with three differentloading screens every time they tried to access it (Fig. 1).
Fig. 1: How it used to be.
We set out to solve this by creating a loading experience with seamlessvisualsand engaging elements. The aim was to improve perceived performancewhile avoiding the need to heavily change the underlying fundamentals in our app. All-in-all we wanted a loading experience that feelsfast and engaging, cutting down on user confusion and frustration.
The Method: Three Phases of Smarter Loading
The Zesty.io manager web appuses a PRPLloading strategy and has three phases:
Preloader:This is when the index.html file gets served, but React isn't mounted.
Global app loader:Once React ismounted. In this phase, the web app grabs initial instance data and checks user authorization.
Sub-app loader: Finally, the app loads data for the specific sub-app (e.g. content editor, media, etc.) that's being viewed.
Seamless Visuals
Making the UI Feel Continuous From Load to Launch
Different loading screens for each phase can make the whole loading experience feel slow and disjointed. To make the experience smoother and seemfaster the loading screen should look the same throughout the whole loading process. Instead of a full-screen loader that's swapped out for the app when it's ready, the loading screen should grab elements from the app's layout. This means sidebars, topbars, sub-app navigation, and how these components look and how wide they are, based on what the user set before.
At first, the solution seemed easy but getting those specific requirements working was harder than imagined. We needed to make sure the loading screen showed the app's current state correctly (like if the sidebar was collapsed/expanded or the sub-app navigation bar width). We also needed to sync the loading screen quotes with an external data source. And lastly, we had to keep the quote consistent throughout the whole loading process.
The first phase does not have access to the application’s state management logic. Which presents a hurdle, since we needed to make sure the loading screen’s layout already reflects the app’s current state. As the UI component state is saved in the browser's local storage and indexedDB, we can use that to our advantage to share the state between the preloading and subsequent phases. To make sure the layout reflects the app’s current state before React mounted, we grab the sidebar’s collapsed state and each sub-app navigation’s width then use these to update the CSS via JavaScript. This way, we could make sure that once the app loaded, the preloading screen had already matched the layout, so there was no layout thrashing. This also makes sure that if the user changes any of the dynamic UI elements while using the app the layout will be in-sync the next time they reload.
Engaging Elements
Creating Moments That Connect Before the App Loads
By adding loading screen quotes we wanted to get users engaged with the app even before it's fully loaded, instead of just waiting. To sync the quotes with an external data source we used Zesty.io’s Instant API feature. Which lets users directly access a complete dataset (like metadata, image objects and related resource objects to name a few) from content made and managed through the platform - one of the cool features that our platform offers. I won't go into too much detail here, but basically, we made a dataset with all our loading quote content. Then we set up an API call to fetch and save the data in local storage. When the page loads we compare the external data to what's in local storage and update local storage if needed. A major advantage to having the loading quotes saved externally and only updating the locally saved data when there are changes is that it allows us to easily add and make changes without having to rebuild the app every time.
Finally, to keep the loading quote consistent, we stored the quote into the browser’s window object. This allowed us to render the same quote across the preloading and React mounted phase, ensuring a consistent user experience.
Perceived Performance
Why It FeelsFaster Now
By focusing on how fast it feelsand making the loading experience unified we turned a disjointed process into something smooth and engaging.
Aligning visuals across all loading phases and keeping users engaged with meaningful content was enough to transform a fragmented wait time into a smooth user experience. It's a reminder that performance isn’t just about speed—it’s about how speed feels. And that good design and technical solutions are for making web experiences user-friendly; even something as common as loading.
You can experience the new loading flow live in the Zesty.io Manager App. Have feedback or ideas? We’d love to hear from you.
By Lunar Jay Cuenca