Skeleton loading screen in Sanity

[Klinopra]

I am facing difficulty in determining the optimal approach to display skeleton screens in React 18 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 React 18 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?

Example code:

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