Fix flash of navbar & snippet toggler (directus#19047)

VincentKempers · Jun 30, 2023 · 78b2ca4 · 78b2ca4
1 parent 55f3d4c
commit 78b2ca4
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git a/docs/.vitepress/components/SnippetToggler.vue b/docs/.vitepress/components/SnippetToggler.vue
@@ -34,14 +34,14 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue';
+import { onBeforeMount, ref, watch } from 'vue';
 
 const props = defineProps<{
 	choices: string[];
 	label?: string;
 }>();
 
-const selected = ref(props.choices[0]);
+const selected = ref();
 
 const useStorage = (key: string) => {
 	const getStorageValue = () => {
@@ -55,12 +55,10 @@ const useStorage = (key: string) => {
 
 const { getStorageValue, setStorageValue } = useStorage('toggler-value');
 
-onMounted(() => {
+onBeforeMount(() => {
 	const value = getStorageValue();
 
-	if (value) {
-		selected.value = value;
-	}
+	selected.value = value || props.choices[0];
 
 	watch(selected, (value) => {
 		setStorageValue(value);

diff --git a/docs/.vitepress/theme/Layout.vue b/docs/.vitepress/theme/Layout.vue
@@ -1,5 +1,5 @@
 <template>
-	<Layout :class="{ isHome: path === '/' }">
+	<Layout :class="{ isHome }">
 		<template #doc-footer-before>
 			<Feedback :url="path" :title="title" />
 			<Contributors id="contributors" :contributors="contributors" />
@@ -19,6 +19,7 @@ const route = useRoute();
 const title = computed(() => page.value.title);
 const contributors = computed(() => page.value.frontmatter.contributors);
 const path = computed(() => route.path);
+const isHome = computed(() => ['/', '/index.html'].includes(path.value));
 </script>
 
 <style scoped>