My Login Page doesn't load all elements at once
Unanswered
Sun bear posted this in #help-forum
Sun bearOP
I have 2 issues with my login page which I don't know how to solve:
When the page is opened it doesn't load everything at once.
My Logo elements load last
My images which change colour based on the light theme seem to use a placeholder colour then load the correct colour (I think they load the light mode colours first then switch to dark mode)
I want it to either wait until everything is loaded either somehow fix it by making the loading time faster or something like that.
I found out that it looks like the dark theme variant of some of my components and the logos are loaded via the client using javascript (or so it seems).
If I disable JS and then reload the page then the elements in question (the ones that load in later) don't show up at all, (in this case the logos) while the other elements on the page do not switch to the dark mode variant.
How do I go about solving this ?
I suppose it has to do with pre-rendering HTML and server/client loading but how do I go about solving these issues ?
When the page is opened it doesn't load everything at once.
My Logo elements load last
My images which change colour based on the light theme seem to use a placeholder colour then load the correct colour (I think they load the light mode colours first then switch to dark mode)
I want it to either wait until everything is loaded either somehow fix it by making the loading time faster or something like that.
I found out that it looks like the dark theme variant of some of my components and the logos are loaded via the client using javascript (or so it seems).
If I disable JS and then reload the page then the elements in question (the ones that load in later) don't show up at all, (in this case the logos) while the other elements on the page do not switch to the dark mode variant.
How do I go about solving this ?
I suppose it has to do with pre-rendering HTML and server/client loading but how do I go about solving these issues ?
13 Replies
Giant panda
Have you given
priority to the Images that are above the fold to hint that they should be displayed asap?@Giant panda Have you given `priority` to the `Image`s that are above the fold to hint that they should be displayed asap?
Sun bearOP
I don't know. Also this seems to happen because I'm using different colour scheme / image sources for dark/light modes (I'm using next-themes)
Here is an example for my e-mail icon:
I do a similar thing for my Logo elements:
Is it possible this is what causes the issue since on the server side the theme is not detected ? The theme is detected on the client side, while the server returns "undefined".
Here is an example for my e-mail icon:
// RemovedI do a similar thing for my Logo elements:
// removedIs it possible this is what causes the issue since on the server side the theme is not detected ? The theme is detected on the client side, while the server returns "undefined".
Giant panda
You are only able to actively get the theme on the client and thus the result from the server gets discarded.
For the Rive thingy I have no clue what it is and it's likely you'll not be easily able to properly get it right considering it looks like some 3D animation
Sun bearOP
I see.
Giant panda
For the static image in your header you can use a
picture element wrapping Image and adding a new source with a media query for dark themes.Additionally you can add the
priority prop to see if things get better.Also don't make assumptions based on how the dev server works. Make a prod build and investigate that.
@Giant panda For the Rive thingy I have no clue what it is and it's likely you'll not be easily able to properly get it right considering it looks like some 3D animation
Sun bearOP
It's basically a vector animation software which can be used on web pages. As in you can design your animations using keyframes and then import them into your project.
It's pretty cool since you can also make the animations interactive when you do things. Like you can program them when you click on them to play another animation and so on, you get the idea.
I think they also have like a store or a library from where you can import animations designed by others if you don't want to create your own.