Best way to implement loading skeletons in Hydrogen v2?

[Klinopra]

I am facing difficulty in determining the optimal approach to display skeleton screens in shopify hydrogen while loading Sanity modules.

The issue lies in the fact that without making an API call to the Sanity backend, I am unable to determine in advance the specific modules that have been chosen for use within Sanity. Consequently, I cannot display the correct grid template with skeletons when the module sequence changes from week to week due to sanity modifications. For example, this may include image or text modules, each of which may be loaded in a different order. It's hard to use Suspense Async Await when you don't know the stucture beforehand.

I am seeking guidance on the most effective method to enhance loading speed and show loading skeletons. One idea that has crossed my mind is to utilize Shopify Hydrogen to query Sanity periodically to establish the structure, allowing it to determine the placement of the skeletons before the user visits the site.

What, in your professional opinion, would be the most suitable method to tackle this problem?

{sanityHome?.modules && (
        <div
          className={clsx(
            'mb-32 mt-24 px-4', //
            'md:px-8',
          )}
        >
          <ModuleGrid items={sanityHome.modules} />
        </div>
)}

[davidhousedev]

We're facing a very similar challenge with our integration in Contentful.

It sounds like you might be using defer for your Sanity queries. If you await your promise in your loader then you won't have to render skeleton states from Sanity because you will have the data you need when your React components render on the server.

For us, we fetch from Shopify first because Shopify is aware of our products and collections. Only after the product or collection is fetched, do we reach out to Contentful. We are trying to move away from this model and reach out to Contentful first by synchronizing Product and collection data in Contentful. Our goal is to await the request to Contentful and defer on the product and collection data, so we know what modules we have and can render appropriate skeleton states.

Hope this helps!

[Klinopra]

@davidhousedev Thank you for reply! I have made it wait for sanity queue now, and then i fetch all the shopify hydrogen products/collections afterwards through useFetch. So im actually showing skeleton screen while sanity queue finishes (doesn't fit content 100%), and also afterwards when images from shopify is loading.

[davidhousedev]

@Husiar Nice! I'm glad that helped :). If I might make a suggestion, you will improve load speed performance and user experience if you fetch Shopify data within your loader rather than using useFetcher.

If you use useFetcher, then your Shopify data will only be fetched after the client has rendered (which takes some time!). However, if you take the following approach, then you will increase load speed:

1. await Sanity query in your loader
2. Within your loader, traverse your Sanity content to look for all references to Shopify data, and collect their ids.
3. Send requests to get all of the Shopify data based on the ids found in your sanity data (don't await these requests!)
4. Return your loader, using defer

Then in your React component render, instead of using useFetcher, use the Remix Await component to "await" the deferred data from Shopify. When you do this, you'll supply skeleton states for anything that requires Shopify data.

Hope this helps!

If you want to improve UX even more, you can await some of the Shopify queries but not others. If the product data appears "above the fold" when the customer loads the page, then the page should only load once the content is available :)

[Klinopra]

@davidhousedev Woow your a genius! Thank you a lot, a much better approach. However i am not 100% sure how this could be implemented in practice, can u provide a short code snippet how it could look? So i can see how it "could" look in the different files. Only the important details of course. I really appreciate it! 👍

One of the problems im facing is i use the components that render sanity modules (and require shopify data) multiple places in my application. Then all my routes will be filled with the same queries? Am referring to the famous principle DRY (don't repeat yourself). Can i somehow integrate (DRY, OOP) this with the solution you showed? (For example have a function that traverse data and get shopify data back), just not sure how this would look in practice tbh.