I’m currently using SvelteKit for the frontend of my web application, and while it’s been a great framework overall, I’ve encountered a challenge related to the timing of the onMount lifecycle hook. Specifically, it seems to fire after the prerendering process, leading to a noticeable delay of 500ms to 1s.
This delay becomes problematic due to the presence of a fixed header element on my page. The header’s height is dynamic, dependent on both the screen size and its content. To maintain a smooth visual experience, I’ve been attempting to apply a padding-top to the page content, matching the height of the navbar.
However, the delayed execution of onMount introduces an issue. The content of the page jumps after the delay, resulting in an unsightly entrance effect for users.
I’m seeking advice on how to ensure that the prerendering process accurately calculates the navbar height and promptly updates the page div accordingly. Any insights or solutions would be greatly appreciated.
I tried adding a inside {@html calculate and add height} script but that does not seem to work
2
Answers
I figured out that going with "position: sticky" instead of "position: fixed" worked best for my problem. Big thanks to hackape for providing possible solutions!
Prerender means render on server, thus your dynamic header MUST RESIZE after the page reach the browser to measure the “screen size” and “content size”. Do you notice the contradiction here? The problem is not that
onMountis slow, but that a resize must happen under this model. Slow or fast, content shift happens anyway.How about disable prerender for this page? Use client-side render, and measure the dynamic sizes in the init phase (right in
<script>top-level block) so that you avoid the resize thus avoid content shift.If this approach is not possible, another option is to stick with prerender but visually hide the entire page on initial paint. And you simply unhide the page at the end of
onMount.