Menu
Menu Sheet Overlay
Search
Search Sheet

Instant Page Transitions

    Feature Overview #

    Placeholder content #

    When the user navigates to a new page, 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. The SkeletonBlock and SkeletonText components can be used as placeholders.

    Navigating back #

    When the user navigates back to a page that they previously visited, the page and all 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 rerendered.

    Product data #

    When navigating to a product detail page, any data about that product that is already in the Redux store should be shown immediately. This includes the product’s image. For example, when the user is on a product list page, we will typically have the name, price and image for a number of products. If the user clicks one of those products, the name, price and image should immediately be shown on the product details page.

    Instant Page Transition example

    Testing #

    In Chrome Dev Tools, it is recommended to use the throttling options under the Network tab to slow 3G speeds. This is useful for seeing the page transitions and placeholder content loading frame by frame.

    Verify the following:

    1. Placeholder content renders and is styled correctly in the Core Retail Flow (Homepage -> PLP -> PDP) between page transitions. Content should load in after the placeholders and not jump.

    2. Clicking the back button on the browser or navigating to a page that has been visited previously should be instant and not trigger placeholders.

    3. Product data (such as image and price) should be loaded and instant when navigating from PLP to PDP.

    4. PWA app header should be present at all times between transitions.

    Debugging #

    Product image isn’t shown immediately #

    When navigating to a product detail page, the product’s image should be shown immediately if it has previously been shown. If the image isn’t shown immediately, one common cause for this issue is that the image’s src is being modified inside the component where it is being rendered.

    For example, let’s say you have a product image with a URL of https://www.example.com/images/123.jpg. You can resize the image by using query parameters, so you use the URL https://www.example.com/images/123.jpg?w=200&h=200 for the product thumbnails. You store https://www.example.com/images/123.jpg in the Redux store, and update the ProductTile component to use the query parameters.

    // in components/product-tile/index.jsx
    <Image src={`${src}?w=200&h=200`} alt="..." />
    

    You want to show the full size image on the product details page, so you don’t include the query parameters.

    // in containers/product-details/product-details-carousel.jsx
    <Image src={src} alt="..." />
    

    However, this means that the ProductTile and the ProductDetailsCarousel are always referencing different versions of the image. Even though the product image was already requested for ProductTile, ProductDetailsCarousel can’t immediately render it. Because it has a different URL, it must be requested separately.

    To fix this issue, modify the src of the image within your parser or commands, rather than inside the component. This ensures that the already modified version is added to the store, where it can be used in both places.