#Make a loading page

69 messages · Page 1 of 1 (latest)

eternal leaf
#

Hello. I have a bloated home page with a ton of cool framer animations etc.
I want to just display a huge spinner while everything is being loaded in the background, so I get a better performance score. So far I have tried with next/dynamic but it doesn't seem to work once in production. Pls help

lament pebbleBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

verbal hornet
eternal leaf
verbal hornet
eternal leaf
verbal hornet
eternal leaf
#

So i should make it csr?

verbal hornet
#

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

eternal leaf
#

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

verbal hornet
#

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

eternal leaf
#

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.

eternal leaf
#

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

verbal hornet
#

your performance looks good to me 🤔

thefileusearchedfor.png
eternal leaf
#

whaat

#

mobile pls

#

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

#

this is how i checked speed of it

image.png
#

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

eternal leaf
verbal hornet
#

the metrics itself looking good as well

thefileusearchedfor.png
eternal leaf
#

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

verbal hornet
#

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

thefileusearchedfor.png
eternal leaf
#

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

verbal hornet
eternal leaf
verbal hornet
eternal leaf
#

good question i think that might be it tbh

#

nope (i think)

#

here's the build

image.png
verbal hornet
#

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

eternal leaf
#

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

verbal hornet
#

you can add a loading animtion there like this:

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

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

eternal leaf
verbal hornet
# eternal leaf 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

eternal leaf
#

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

verbal hornet
#

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

eternal leaf
#

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

#

no navbar no nothing just a spinner

verbal hornet
#

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

thefileusearchedfor.png
#

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

eternal leaf
#

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

verbal hornet
#

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.

thefileusearchedfor.png
#

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)

eternal leaf
#

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

verbal hornet
eternal leaf
#

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?

verbal hornet
#

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. ...

eternal leaf
#

and what about total blocking time?

#

more server components ig

verbal hornet
#

lets see if the solution resolves both

eternal leaf
verbal hornet
eternal leaf