fix: Fix hydration issues (#266)

* fix(timer): Revert lazy loading timer styles * fix(store-persist): Only restore state when mounted
Hanziness · Sep 2, 2022 · 419293c · 419293c
1 parent 1ee7b68
commit 419293c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/components/timer/display/_timerSwitch.vue b/components/timer/display/_timerSwitch.vue
@@ -15,12 +15,17 @@ import { AvailableTimers } from '~~/stores/settings'
 import TimerMixin from '@/assets/mixins/timerMixin'
 import { useSchedule, TimerState } from '~~/stores/schedule'
 
+import TimerTraditional from '@/components/timer/display/timerTraditional.vue'
+import TimerApproximate from '@/components/timer/display/timerApproximate.vue'
+import TimerPercentage from '@/components/timer/display/timerPercentage.vue'
+import CompleteMarker from '@/components/timer/display/timerComplete.vue'
+
 export default {
   components: {
-    TimerTraditional: defineAsyncComponent(() => import('@/components/timer/display/timerTraditional.vue')),
-    TimerApproximate: defineAsyncComponent(() => import('@/components/timer/display/timerApproximate.vue')),
-    TimerPercentage: defineAsyncComponent(() => import('@/components/timer/display/timerPercentage.vue')),
-    CompleteMarker: defineAsyncComponent(() => import('@/components/timer/display/timerComplete.vue'))
+    TimerTraditional,
+    TimerApproximate,
+    TimerPercentage,
+    CompleteMarker
   },
   mixins: [TimerMixin],
   props: {

diff --git a/plugins/store-persist.client.ts b/plugins/store-persist.client.ts
@@ -54,7 +54,9 @@ function restoreStore (store) {
   const stateToRestore = JSON.parse(localStorage.getItem(getStorePersistenceKey(store.$id)))
 
   if (stateToRestore !== null) {
-    store.$patch(stateToRestore)
+    onMounted(() => {
+      store.$patch(stateToRestore)
+    })
 
     console.log(`Restoring ${store.$id}`)
     const mainStore = useMain()