Skip to content

Commit 07b73b7

Browse files
authored
fix: flicker on docsearch button while loading the search component (#112)
1 parent cfcb540 commit 07b73b7

File tree

1 file changed

+5
-4
lines changed

1 file changed

+5
-4
lines changed

src/vitepress/components/VPNavBarSearch.vue

+5-4
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ const VPAlgoliaSearchBox = defineAsyncComponent(
1212
// to avoid loading the docsearch js upfront (which is more than 1/3 of the
1313
// payload), we delay initializing it until the user has actually clicked or
1414
// hit the hotkey to invoke it
15+
const started = ref(false)
1516
const loaded = ref(false)
1617
const metaKey = ref('Meta')
1718
@@ -37,16 +38,16 @@ onMounted(() => {
3738
})
3839
3940
function load() {
40-
if (!loaded.value) {
41-
loaded.value = true
41+
if (!started.value) {
42+
started.value = true
4243
}
4344
}
4445
</script>
4546

4647
<template>
4748
<div v-if="config.algolia" class="VPNavBarSearch">
48-
<VPAlgoliaSearchBox v-if="loaded" />
49-
<div v-else id="docsearch" @click="load">
49+
<VPAlgoliaSearchBox v-if="started" @vue:mounted="loaded = true" />
50+
<div v-if="!loaded" id="docsearch" @click="load">
5051
<button
5152
type="button"
5253
class="DocSearch DocSearch-Button"

0 commit comments

Comments
 (0)