From 51661def8ff743733d391a61ffb2ab1b66473fd2 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Sun, 18 Jun 2023 17:45:56 +0530
Subject: [PATCH] fix(theme): prevent glitch when algolia chunk is loaded
 (#2519)

---
 src/client/theme-default/components/VPNavBarSearch.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/client/theme-default/components/VPNavBarSearch.vue b/src/client/theme-default/components/VPNavBarSearch.vue
index 12c3929e49b8..728d04c2abaa 100644
--- a/src/client/theme-default/components/VPNavBarSearch.vue
+++ b/src/client/theme-default/components/VPNavBarSearch.vue
@@ -26,6 +26,7 @@ const { theme, localeIndex } = useData()
 // payload), we delay initializing it until the user has actually clicked or
 // hit the hotkey to invoke it.
 const loaded = ref(false)
+const actuallyLoaded = ref(false)
 
 const buttonText = computed(() => {
   const options = theme.value.search?.options ?? theme.value.algolia
@@ -169,9 +170,10 @@ const provider = __ALGOLIA__ ? 'algolia' : __VP_LOCAL_SEARCH__ ? 'local' : ''
       <VPAlgoliaSearchBox
         v-if="loaded"
         :algolia="theme.search?.options ?? theme.algolia"
+        @vue:beforeMount="actuallyLoaded = true"
       />
 
-      <div v-else id="docsearch">
+      <div v-if="!actuallyLoaded" id="docsearch">
         <VPNavBarSearchButton :placeholder="buttonText" @click="load" />
       </div>
     </template>