Svelte Stores causes rendering order mishaps

Bug description

Trying to have an “all routes needs a login, except few whitelisted one, such as an about page” type of application

Adding this to the layout :

<script>
	[...]
	const whitelistedRoutes = ["/about"];
	
	$: isWhitelisted = whitelistedRoutes.some((route) => $isActive(route));
</script>

{#if isWhitelisted}
	<slot />
{:else}
	<h1>DO THE LOGIN</h1>
{/if}

works pretty well, but as soon as you add a store to any element referenced in this layout, going from a non-whitelisted page to a whitelisted page might flash the content of the non-whitelisted page very briefly (I’m talking about ~20 milliseconds here)

Environment

I created a new project using the default routify-starter template, added a basically empty about page, and this code to the src/pages/_layout.svelte file :

<!-- routify:options preload="proximity" -->
<script>
	import { isActive } from "@roxi/routify";
	import { test } from "../store";

	const whitelistedRoutes = ["/about"];

	$: isWhitelisted = whitelistedRoutes.some((route) => $isActive(route));
</script>

<nav>
	<a href="/">Home</a>
	<a href="/about">about</a>
</nav>

{#if isWhitelisted}
	<slot />
{:else}
	<h1>DO THE LOGIN</h1>
{/if}

{#if $test}
	<span>My store is active</span>
{/if}

with a basic store at src/store.js :

import { writable } from "svelte/store";

export const test = writable(false);

Live example

https://cranky-jepsen-7974d1.netlify.app/

Simply go back and forth between the home and about links, you should see the text / image of the home page appear briefly when going from the home page to the about page, despite the home page being “protected” by a “login”

This does not happen 100% of the time, so you might need to try to go back and forth more than once.

If the code in the above example :

import { test } from "../store";

[...]
{#if $test}
	<span>My store is active</span>
{/if}

wouldn’t be there, I could not get a single time the content of the home page to show.

[jakobrosenberg]

Happy this got solved. I’m closing the issue for now.

[V-ed]

I noticed you’re calling $ready() unconditionally while isWhitelisted is set reactively. This means $ready() will always be called before isWhitelisted.

Could you try this?

$: if (!isWhitelisted) $ready()

Yes, that’s actually the first thing I tried when you explained the decorators solution earlier, it unfortunately doesn’t work 😦