From 0906da58262a151168893114ae8b3f5360c5fdee Mon Sep 17 00:00:00 2001
From: Alessandro Jean <14254807+alessandrojean@users.noreply.github.com>
Date: Sat, 9 Sep 2023 18:58:18 -0300
Subject: [PATCH] Fix more hydration issues. (#37)

---
 .../components/CustomSwitchAppearance.vue     | 10 +-
 .../Extensions/ExtensionFilters.vue           | 94 ++++++++++---------
 2 files changed, 54 insertions(+), 50 deletions(-)

diff --git a/website/src/.vitepress/theme/components/CustomSwitchAppearance.vue b/website/src/.vitepress/theme/components/CustomSwitchAppearance.vue
index d8ec926b..f7da0758 100644
--- a/website/src/.vitepress/theme/components/CustomSwitchAppearance.vue
+++ b/website/src/.vitepress/theme/components/CustomSwitchAppearance.vue
@@ -29,10 +29,12 @@ onMounted(() => {
 		:data-view-transition="supportsViewTransition"
 		@click="toggleAppearance"
 	>
-		<Transition name="fade" mode="out-in">
-			<VPIconSun v-if="!isDark" class="sun" />
-			<VPIconMoon v-else class="moon" />
-		</Transition>
+		<ClientOnly>
+			<Transition name="fade" mode="out-in">
+				<VPIconSun v-if="!isDark" class="sun" />
+				<VPIconMoon v-else class="moon" />
+			</Transition>
+		</ClientOnly>
 	</button>
 </template>
 
diff --git a/website/src/.vitepress/theme/components/Extensions/ExtensionFilters.vue b/website/src/.vitepress/theme/components/Extensions/ExtensionFilters.vue
index 2250d9aa..bad2e079 100644
--- a/website/src/.vitepress/theme/components/Extensions/ExtensionFilters.vue
+++ b/website/src/.vitepress/theme/components/Extensions/ExtensionFilters.vue
@@ -40,53 +40,55 @@ const labelPosition = computed(() => isSmallScreen.value ? "top" : "right")
 </script>
 
 <template>
-	<div class="filters-list">
-		<ElForm label-width="120px" :label-position="labelPosition">
-			<ElFormItem label="Search:">
-				<ElInput
-					:model-value="search"
-					placeholder="Search extensions by name or ID..."
-					clearable
-					@update:model-value="$emit('update:search', $event)"
-				/>
-			</ElFormItem>
-			<ElFormItem label="Languages:">
-				<ElSelect
-					:model-value="lang"
-					placeholder="Show specific languages..."
-					multiple
-					clearable
-					@update:model-value="$emit('update:lang', $event)"
-				>
-					<ElOption
-						v-for="[group] in extensions"
-						:key="group.lang"
-						:label="group.lang === 'en' ? simpleLangName(group.lang) : langName(group.lang)"
-						:value="group.lang"
+	<ClientOnly>
+		<div class="filters-list">
+			<ElForm label-width="120px" :label-position="labelPosition">
+				<ElFormItem label="Search:">
+					<ElInput
+						:model-value="search"
+						placeholder="Search extensions by name or ID..."
+						clearable
+						@update:model-value="$emit('update:search', $event)"
 					/>
-				</ElSelect>
-			</ElFormItem>
-			<ElFormItem label="Sort by:">
-				<ElRadioGroup
-					:model-value="sort"
-					@update:model-value="$emit('update:sort', $event)"
-				>
-					<ElRadio label="Ascending" />
-					<ElRadio label="Descending" />
-				</ElRadioGroup>
-			</ElFormItem>
-			<ElFormItem label="Display mode:">
-				<ElRadioGroup
-					:model-value="nsfw"
-					@update:model-value="$emit('update:nsfw', $event)"
-				>
-					<ElRadio label="NSFW" />
-					<ElRadio label="SFW" />
-					<ElRadio label="Show all" />
-				</ElRadioGroup>
-			</ElFormItem>
-		</ElForm>
-	</div>
+				</ElFormItem>
+				<ElFormItem label="Languages:">
+					<ElSelect
+						:model-value="lang"
+						placeholder="Show specific languages..."
+						multiple
+						clearable
+						@update:model-value="$emit('update:lang', $event)"
+					>
+						<ElOption
+							v-for="[group] in extensions"
+							:key="group.lang"
+							:label="group.lang === 'en' ? simpleLangName(group.lang) : langName(group.lang)"
+							:value="group.lang"
+						/>
+					</ElSelect>
+				</ElFormItem>
+				<ElFormItem label="Sort by:">
+					<ElRadioGroup
+						:model-value="sort"
+						@update:model-value="$emit('update:sort', $event)"
+					>
+						<ElRadio label="Ascending" />
+						<ElRadio label="Descending" />
+					</ElRadioGroup>
+				</ElFormItem>
+				<ElFormItem label="Display mode:">
+					<ElRadioGroup
+						:model-value="nsfw"
+						@update:model-value="$emit('update:nsfw', $event)"
+					>
+						<ElRadio label="NSFW" />
+						<ElRadio label="SFW" />
+						<ElRadio label="Show all" />
+					</ElRadioGroup>
+				</ElFormItem>
+			</ElForm>
+		</div>
+	</ClientOnly>
 </template>
 
 <style lang="stylus">