Cumulative Layout Shift, Suspense and loading state

[tarjelavik]

Hi! I am trying to reduce Cumulative Layout Shift (CLS) in a Nextjs v13 app router app. I see that https://dc.library.northwestern.edu/ have some quick CLS when navigating to a item page and mounting Clover.

Do you have any thoughts on how to mitigate this? Adding a loading state in the next/dynamic config does not really fix this. The clover-iiif loading state takes over after the Next loading state is remove, and it has with no height set.

const CloverIIIF = dynamic(() => import('@samvera/clover-iiif'), {
  ssr: false,
  loading: () => <div className='h-[650px] bg-slate-500'>Blæ...</div>
})

I might have missed something, but do you have some advice on this topic?

[mathewjordan]

@tarjelavik Apologies for seeing this just today.

I think this is the way handled this: https://github.com/nulib/dc-nextjs/blob/deploy/staging/pages/_app.tsx#L97

Note that we wait to render the page once mounted is set to true in our _app.tsx file. This could make it easier for the user's experience though I don't believe it actually renders any further.

[tarjelavik]

No worries :-).

Back from holiday, so need to get into devmode again. I guess i have to figure out how to do some Suspense stuff in the app directory.