I have a list of events. When receiving the list of events, I'm using @tanstack/react-query to prefetch each event in the list (each event contains a URL to a hero image among other things) so that when user navigates to an event they have the information readily available, except image which will be fetched efter page has loaded. Both the list component and single event page are marked with "use client". I also have a loading.tsx file next to the single event page file containing a "skeleton" of the layout of the single event page.

I'm using output mode "standalone" and hosting this in a Static Web App on Azure.

Now, when user clicks an event in the list, they get navigated to the single event page and first the "skeleton" layout is shown, then the actual page is shown and because I've perfected the content only the images gets fetched.

All good. Except, that the content jumps when the hero image finally loads. But, because I'm using Contentful as my CMS I also get the height of the image so thatI can preset the height and show a 1x1 place holder pixel using blurDataUrl property on Image tag.

There is still one problem though, the loading skeleton which is rendered in loading.tsx in there I do not know the height of the placeholder image square, Is there any way to feed the loading.tsx with properties, access react-query cache, or in some other way set the height of place holder square to match the size of the image?