Note: The Designing App-Like Patterns series is intended for interaction designers. This series will show you how to use the Mobify Platform to design performant shopping experiences, with app-like user experience best practices.
Instant page transitions are achieved when shared content from multiple pages in the PWA are rendered immediately, making the transition between pages feel instant and smooth.
To further enhance the effect, a placeholder is shown for any content that requires time to load. Think of placeholders as the building blocks to instant transitions and a tactic to improve users’ perceptions of page load speed. When implemented correctly, users will believe that the page is loading faster than it actually is.
The Mobify SDK has several placeholder components, including SkeletonBlock, SkeletonInline, and SkeletonText. SkeletonBlock is used for larger chunks of information such as images or a cluster of text. SkeletonInline is used for inline pieces of content such as breadcrumbs. SkeletonText is used for multiple lines of text such as paragraphs. You can read more about placeholders in Placeholder Design.
Scenarios to design for instant page transitions
User navigates to a new page for the first time
When the user navigates to a new page for the first time, placeholders should be shown in place of any content that can't be rendered immediately. These placeholders should be the same size as the content they are replacing so that the page doesn't shift when the content can be rendered.
User navigates back to a page they have previously visited
When the user navigates back to a page that they had previously visited, the page and all of its contents should be rendered immediately. After the page is rendered, a request should be sent to check if anything has changed. If so, the relevant parts of the page should be re-rendered.
User navigates to a page with some shared content
When the user navigates to a page with some shared content (for example, transitioning from a product list page to a product detail page), the shared content should be shown immediately, while placeholders should be shown in place of any content that can't be rendered immediately. In our example above, notice how the product list page displays the name, price, and image for a number of different products. If the user clicks on one of the products, any of the re-usable content such as the name, price and image should immediately be shown on the product detail page.