Skip to content

Commit d1c3c28

Browse files
HeunsigHeunsig
committed
refactor: wrap images and icons in ClientOnly for better SSR, add fallback
1 parent 4b0cf5d commit d1c3c28

File tree

3 files changed

+125
-102
lines changed

3 files changed

+125
-102
lines changed

‎components/shared/AppBanner.vue‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -96,14 +96,16 @@ onUpdated(() => {
9696
</div>
9797

9898
<!-- Banner right illustration -->
99-
<div class="w-full md:w-2/3 text-right float-right">
100-
<img
101-
v-if="colorMode.value == 'dark'"
102-
src="/developer-dark.svg"
103-
alt="Developer Dark"
104-
/>
105-
<img v-else src="/developer.svg" alt="Developer Light" />
106-
</div>
99+
<ClientOnly>
100+
<div class="w-full md:w-2/3 text-right float-right">
101+
<img
102+
v-if="colorMode.value == 'dark'"
103+
src="/developer-dark.svg"
104+
alt="Developer Dark"
105+
/>
106+
<img v-else src="/developer.svg" alt="Developer Light" />
107+
</div>
108+
</ClientOnly>
107109
</section>
108110
</template>
109111

‎components/shared/AppHeader.vue‎

Lines changed: 112 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -47,23 +47,29 @@ function showModal() {
4747
<!-- Header menu links and small screen hamburger menu -->
4848
<div class="flex justify-between items-center px-6 sm:px-0">
4949
<!-- Header logos -->
50-
<div>
51-
<NuxtLink to="/">
52-
<img
53-
v-if="colorMode.value == 'dark'"
54-
src="/logo-light.svg"
55-
class="w-36"
56-
alt="Light Logo"
57-
/>
50+
<ClientOnly>
51+
<div>
52+
<NuxtLink to="/">
53+
<img
54+
v-if="colorMode.value == 'dark'"
55+
src="/logo-light.svg"
56+
class="w-36"
57+
alt="Light Logo"
58+
/>
5859

59-
<img
60-
v-else
61-
src="/logo-dark.svg"
62-
alt="Color Logo"
63-
class="w-36"
64-
/>
65-
</NuxtLink>
66-
</div>
60+
<img
61+
v-else
62+
src="/logo-dark.svg"
63+
alt="Color Logo"
64+
class="w-36"
65+
/>
66+
</NuxtLink>
67+
</div>
68+
69+
<template #fallback>
70+
<div class="w-36"></div>
71+
</template>
72+
</ClientOnly>
6773

6874
<!-- Theme switcher small screen -->
6975
<button
@@ -81,45 +87,51 @@ function showModal() {
8187
cursor-pointer
8288
"
8389
>
84-
<!-- Dark mode icon -->
85-
<svg
86-
v-if="colorMode.value == 'light'"
87-
xmlns="http://www.w3.org/2000/svg"
88-
class="
89-
text-liText-ternary-dark
90-
hover:text-gray-400
91-
dark:text-liText-ternary-light
92-
dark:hover:text-liBorder-primary-light
93-
w-6
94-
h-6
95-
"
96-
fill="none"
97-
viewBox="0 0 24 24"
98-
stroke="currentColor"
99-
>
100-
<path
101-
stroke-linecap="round"
102-
stroke-linejoin="round"
103-
stroke-width="2"
104-
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
105-
/>
106-
</svg>
107-
<!-- Light mode icon -->
108-
<svg
109-
v-else
110-
xmlns="http://www.w3.org/2000/svg"
111-
class="text-gray-200 hover:text-gray-50 w-6 h-6"
112-
fill="none"
113-
viewBox="0 0 24 24"
114-
stroke="currentColor"
115-
>
116-
<path
117-
stroke-linecap="round"
118-
stroke-linejoin="round"
119-
stroke-width="2"
120-
d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
121-
/>
122-
</svg>
90+
<ClientOnly>
91+
<!-- Dark mode icon -->
92+
<svg
93+
v-if="colorMode.value == 'light'"
94+
xmlns="http://www.w3.org/2000/svg"
95+
class="
96+
text-liText-ternary-dark
97+
hover:text-gray-400
98+
dark:text-liText-ternary-light
99+
dark:hover:text-liBorder-primary-light
100+
w-6
101+
h-6
102+
"
103+
fill="none"
104+
viewBox="0 0 24 24"
105+
stroke="currentColor"
106+
>
107+
<path
108+
stroke-linecap="round"
109+
stroke-linejoin="round"
110+
stroke-width="2"
111+
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
112+
/>
113+
</svg>
114+
<!-- Light mode icon -->
115+
<svg
116+
v-else
117+
xmlns="http://www.w3.org/2000/svg"
118+
class="text-gray-200 hover:text-gray-50 w-6 h-6"
119+
fill="none"
120+
viewBox="0 0 24 24"
121+
stroke="currentColor"
122+
>
123+
<path
124+
stroke-linecap="round"
125+
stroke-linejoin="round"
126+
stroke-width="2"
127+
d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
128+
/>
129+
</svg>
130+
131+
<template #fallback>
132+
<svg xmlns="http://www.w3.org/2000/svg" class="text-gray-300 w-6 h-6 animate-spin-slow" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="2" x2="12" y2="6"></line><line x1="12" y1="18" x2="12" y2="22"></line><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line><line x1="2" y1="12" x2="6" y2="12"></line><line x1="18" y1="12" x2="22" y2="12"></line><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line></svg>
133+
</template>
134+
</ClientOnly>
123135
</button>
124136

125137
<!-- Small screen hamburger menu -->
@@ -203,46 +215,52 @@ function showModal() {
203215
rounded-lg
204216
cursor-pointer
205217
"
206-
>
207-
<!-- Dark mode icon -->
208-
<svg
209-
v-if="colorMode.value == 'light'"
210-
xmlns="http://www.w3.org/2000/svg"
211-
class="
212-
text-liText-ternary-dark
213-
hover:text-gray-400
214-
dark:text-liText-ternary-light
215-
dark:hover:text-liBorder-primary-light
216-
w-6
217-
h-6
218-
"
219-
fill="none"
220-
viewBox="0 0 24 24"
221-
stroke="currentColor"
222-
>
223-
<path
224-
stroke-linecap="round"
225-
stroke-linejoin="round"
226-
stroke-width="2"
227-
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
228-
/>
229-
</svg>
230-
<!-- Light mode icon -->
231-
<svg
232-
v-else
233-
xmlns="http://www.w3.org/2000/svg"
234-
class="text-gray-200 hover:text-gray-50 w-6 h-6"
235-
fill="none"
236-
viewBox="0 0 24 24"
237-
stroke="currentColor"
238218
>
239-
<path
240-
stroke-linecap="round"
241-
stroke-linejoin="round"
242-
stroke-width="2"
243-
d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
244-
/>
245-
</svg>
219+
<ClientOnly>
220+
<!-- Dark mode icon -->
221+
<svg
222+
v-if="colorMode.value == 'light'"
223+
xmlns="http://www.w3.org/2000/svg"
224+
class="
225+
text-liText-ternary-dark
226+
hover:text-gray-400
227+
dark:text-liText-ternary-light
228+
dark:hover:text-liBorder-primary-light
229+
w-6
230+
h-6
231+
"
232+
fill="none"
233+
viewBox="0 0 24 24"
234+
stroke="currentColor"
235+
>
236+
<path
237+
stroke-linecap="round"
238+
stroke-linejoin="round"
239+
stroke-width="2"
240+
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
241+
/>
242+
</svg>
243+
<!-- Light mode icon -->
244+
<svg
245+
v-else
246+
xmlns="http://www.w3.org/2000/svg"
247+
class="text-gray-200 hover:text-gray-50 w-6 h-6"
248+
fill="none"
249+
viewBox="0 0 24 24"
250+
stroke="currentColor"
251+
>
252+
<path
253+
stroke-linecap="round"
254+
stroke-linejoin="round"
255+
stroke-width="2"
256+
d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
257+
/>
258+
</svg>
259+
260+
<template #fallback>
261+
<svg xmlns="http://www.w3.org/2000/svg" class="text-gray-300 w-6 h-6 animate-spin-slow" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="2" x2="12" y2="6"></line><line x1="12" y1="18" x2="12" y2="22"></line><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line><line x1="2" y1="12" x2="6" y2="12"></line><line x1="18" y1="12" x2="22" y2="12"></line><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line></svg>
262+
</template>
263+
</ClientOnly>
246264
</button>
247265
</div>
248266
</div>

‎tailwind.config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ export default {
1111
darkMode: "class",
1212
theme: {
1313
extend: {
14+
animation: {
15+
"spin-slow": "spin 4s linear infinite",
16+
},
1417
colors: {
1518
"primary-light": "#F7F8FC",
1619
"secondary-light": "#FFFFFF",

0 commit comments

Comments
 (0)