From 78b2ca423542242ad7cfe6361db5bf67b27e8ce1 Mon Sep 17 00:00:00 2001
From: Pascal Jufer <pascal-jufer@bluewin.ch>
Date: Fri, 30 Jun 2023 19:02:07 +0200
Subject: [PATCH] Fix flash of navbar & snippet toggler (#19047)

---
 docs/.vitepress/components/SnippetToggler.vue | 10 ++++------
 docs/.vitepress/theme/Layout.vue              |  3 ++-
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/docs/.vitepress/components/SnippetToggler.vue b/docs/.vitepress/components/SnippetToggler.vue
index a99d110de54bc..de9583c6b3155 100644
--- 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
index afbdc948f8b5b..d3e5228979478 100644
--- 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>