you can add a loading.tsx to your route. Like that the loading.tsx will be first displayed and when the page.tsx is ready, it will be visible

I tried that. My issue is that the loading state is determined by promises being unresolved, while for me it should be loading while ui is rendered (?)

is your UI SSR? If so it should be instantly there after the loading.tsx

It is ssr

yea, then it's instantly there after your loading.tsx (if there is any)

So i should make it csr?

no SSR sounds good. Can you clarify your issue more so we can clearly help you

yes i will send it now

i could screenshare the code for you so you see how everything is set up if you'd like

at the current point of resolving your issue the issue description is more important for me than the code itself. Without knowing whats wrong, we can't help you

so I get a better performance score

when it's just this, google wait untils it see's the first elements. So when you have a delay for fancy animation, this delay will result in a worse performance

Ok sorry i will try my best to describe everything.


I have a website that uses next-intl, and has statically generated params for sites (For locales)

I have the /page.tsx, that has a lot of fancy components that use framer motion. Those components tank the performance (adding them adds a lot of total blocking time, and javascript execution time).

What i'd like to do, is to implement a loader (such as on kresky.pl), that loads instantly, and then all those performance heavy stuff is displayed when ready.

^

My website is sparkrok.com, if you'd like to see for yourself what we are talking about

your performance looks good to me 🤔

whaat

mobile pls

did you check with devtools lighthouse? or the pagespeed.web.dev?

this is how i checked speed of it

my other websites in nextjs score better than this one, significantly

yep

the metrics itself looking good as well

are you perhaps testing with chrome devtools?

if so, the results are influenced by your hardware, so js is executed faster than with the "usual" lighthouse hardware

so it loads quick for you

on mobile it's worse (see attached), yea. That's because what I just said: it will wait until the larges contentful element is there. So it also waits for the delay that is added though the animation. So either remove the delay completely or no animation for the LCE

What i'd like to do, is to implement a loader (such as on kresky.pl), that loads instantly, and then all those performance heavy stuff is displayed when ready.

Can you please tell me how one would implement this?

check out that site's metrics

you are using SSR. So the there is no loading. The content is instantly there. There is no loading time

what about the client components that are dynamic() imported?

is SSR enabled or disabled for them?

good question i think that might be it tbh

nope (i think)

here's the build

ah there you got the "problem". It will be loaded by the client

yes yes this is what i want i think

i want the client to show a spinner instantly, then load them, then show the rest of the page

you can add a loading animtion there like this:

const WithCustomLoading = dynamic(
  () => import('../components/WithCustomLoading'),
  {
    loading: () => <p>Loading...</p>,
  }
)

please see kresky.pl, that page loads a spinner super fast, gets a 100 on the page insights, and then shows the proper page

i have tried this, no effect on performance sadly

then it's still what I alread told you:

So it also waits for the delay that is added though the animation. So either remove the delay completely or no animation for the LCE

^ this delay isn't a rendering delay. It's a delay for the animation. The animation can instantly play, yes but it takes time until it's finished

I think I understand, but wouldn't the spinner solve this?

I know spinners are bad and it's not good design but I really want it

to make it simpler to understand: your content is already there. But the animation is there as well. So even if the animation is there google will only notice this element after the animation is complete. So the loader would look like this (see attached). And yes, only for this specific part, because the rest is SSR

What I was thinking about is showing a loader, for the whooole page

no navbar no nothing just a spinner

I know that you want it like kresky.pl. However: your content is already loaded. It is loaded. Your content is already there. It instantly loaded thought SSR

You can build a customer animation that is in front of this, but it won't be depending on "hey here is something loading"

so would this work?

Move whole page to clientpage.tsx

on the page.tsx
add a dynamic import of clientpage.tsx
and a fallback with a spinner?

and that clientpage would be CSR instead of SSR

I don't know how often I should say this: Your content is already loaded thought SSR. kresky.pl content is loaded thought SSR as well. Their content is already loaded even if the loading animation visible!

And yes, the initial loading animation (as long as I could test it) is always 3 seconds long. So the loading animation is independend from the content itself. Because: the content is already loaded

Attached you can see that the content is instantly there. The loading animation is completely independend from any loading of the content itself as I can see it.

You can do the same: add a loading page that will be visible for the first X seconds that is completly independend from any loading of your page (as your page is loaded SSR)

oh now i understand

so spinner wont help ;d

well ig i will try using suspend where i can and pray i get a decent enough score so people dont kill me for it lol

Thank you very much, I will try this in a few hours as I have to go now

Can I let you know if I face issues with this approach?

it will wait until the larges contentful element is there.

using a loading screen using SSR without animation will display the LCE instantly. That means: good score

With animation:

it also waits for the delay that is added though the animation.

Solution:

So either remove the delay completely or no animation for the LCE

No animation for the LCE can include many possible ways to archive that: using a SSR loading screen without animations. Removing the animations. ...

and what about total blocking time?

more server components ig

lets see if the solution resolves both

Okay, I'm back. Could you please tell me how I can implement a SSR loading screen without animations? It's one of the solutions you mentioned, but I don't know how to start

create a component. Style it with a css file. Add the css file to your component. Finish 🙂

thanks thanks