feat: fix localStorage error by adding loading screen

src/app/(public)/layout.tsx

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 
 import '@/styles/globals.css';
+import '@/styles/animations.css';
 
 import LayoutClient from '@/app/(public)/layout-client';
 

src/components/molecules/RandomFacts/Quiz.tsx

@@ -8,12 +8,13 @@ import { TypedObject } from '@portabletext/types/src';
 import * as React from 'react';
 import { useState } from 'react';
 
+import { saveToLocalStorage } from '@/lib/helper';
+
 import Button from '@/components/buttons/Button';
+import { localStorageKey } from '@/components/organisms/about-free-time/RandomFacts';
 
 import { RandomFact } from '@/types/RandomFact';
 
-const localStorageKey = 'alreadyPlayed';
-
 export interface QuizOption {
   headline: string;
   explanation?: TypedObject;
@@ -42,13 +43,13 @@ const Quiz = ({ options, falseOption, onAnswerSubmission }: QuizProps) => {
   };
 
   const submitAnswer = () => {
-    localStorage.setItem(localStorageKey, 'true');
+    saveToLocalStorage(localStorageKey, 'true');
 
     onAnswerSubmission(falseOption === selectedAnswer);
   };
 
   return (
-    <div className='p4 rounded dark:bg-slate-900'>
+    <div className='rounded p-4 dark:bg-slate-900'>
       <FormControl>
         <RadioGroup
           className='mb-4'

src/components/molecules/RandomFacts/QuizAnswers.tsx

@@ -18,7 +18,7 @@ const QuizAnswers = ({
   answeredCorrectly,
 }: QuizAnswersProps) => {
   return (
-    <div className='flex flex-col items-center rounded px-4 py-2 dark:bg-slate-900'>
+    <div className='flex flex-col items-center rounded px-4 pb-0 pt-3 dark:bg-slate-900'>
       <div className='mb-4 mt-0 w-fit rounded bg-gray-200 p-4 dark:bg-slate-700'>
         <p className='text-gray-800 dark:text-gray-50'>
           {answeredCorrectly

src/components/organisms/about-free-time/Music.tsx

@@ -10,7 +10,7 @@ const Music = () => {
   const widgetTheme = theme === 'dark' ? '&theme=0' : '';
 
   return (
-    <div className='mb-6'>
+    <div className='mb-10'>
       <div className='mb-6 mt-2 flex'>
         <h2>Very old music I listen to</h2>
       </div>

src/components/organisms/about-free-time/RandomFacts.tsx

@@ -1,33 +1,55 @@
 'use client';
 
 import * as React from 'react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+
+import { getFromLocalStorage, saveToLocalStorage } from '@/lib/helper';
 
 import GeneralView from '@/components/molecules/RandomFacts/GeneralView';
 import Quiz, { QuizData } from '@/components/molecules/RandomFacts/Quiz';
 import QuizAnswers from '@/components/molecules/RandomFacts/QuizAnswers';
 
-const localStorageKey = 'alreadyPlayed';
+export const localStorageKey = 'alreadyPlayed';
 
 const RandomFacts = ({ options, falseOption, trueFacts }: QuizData) => {
   const [submitted, setSubmitted] = useState(false);
   const [answerCorrect, setAnswerCorrect] = useState(false);
 
-  const [alreadyPlayed, setAlreadyPlayed] = useState(() => {
-    const alreadyPlayed = localStorage.getItem(localStorageKey);
-    return alreadyPlayed ? JSON.parse(alreadyPlayed) : false;
-  });
+  const [loading, setLoading] = useState(true);
+  const [alreadyPlayed, setAlreadyPlayed] = useState(false);
+
+  useEffect(() => {
+    const fetchDataFromLocalStorage = () => {
+      const alreadyPlayedValue = getFromLocalStorage(localStorageKey);
+      setAlreadyPlayed(
+        alreadyPlayedValue ? JSON.parse(alreadyPlayedValue) : false
+      );
+
+      setLoading(false);
+    };
+
+    fetchDataFromLocalStorage();
+  }, []);
 
   const handleAnswerSubmission = (isCorrect: boolean) => {
     setSubmitted(true);
     setAnswerCorrect(isCorrect);
 
     if (!alreadyPlayed) {
-      localStorage.setItem(localStorageKey, JSON.stringify(true));
+      saveToLocalStorage(localStorageKey, JSON.stringify(true));
+
       setAlreadyPlayed(true);
     }
   };
 
+  if (loading) {
+    return (
+      <div className='mt-4 flex items-center justify-center p-4'>
+        <div className='dot-flashing'></div>
+      </div>
+    );
+  }
+
   return (
     <div className='mb-6'>
       <div className='mb-4 mt-2 flex'>

src/lib/helper.ts

@@ -26,6 +26,13 @@ export function openGraph({
   }`;
 }
 
+export function saveToLocalStorage(key: string, value: string): string | null {
+  if (typeof window !== 'undefined') {
+    window.localStorage.setItem(key, value);
+  }
+  return null;
+}
+
 export function getFromLocalStorage(key: string): string | null {
   if (typeof window !== 'undefined') {
     return window.localStorage.getItem(key);

src/styles/animations.css

@@ -0,0 +1,57 @@
+/**
+ * ==============================================
+ * Dot Flashing
+ * ==============================================
+ */
+
+:root {
+  --dot-color: #80a4ff;
+}
+
+.dot-flashing {
+  position: relative;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: var(--dot-color);
+  color: var(--dot-color);
+  animation: dot-flashing 1s infinite linear alternate;
+  animation-delay: 0.5s;
+}
+.dot-flashing::before,
+.dot-flashing::after {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  top: 0;
+}
+.dot-flashing::before {
+  left: -15px;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: var(--dot-color);
+  color: var(--dot-color);
+  animation: dot-flashing 1s infinite alternate;
+  animation-delay: 0s;
+}
+.dot-flashing::after {
+  left: 15px;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: var(--dot-color);
+  color: var(--dot-color);
+  animation: dot-flashing 1s infinite alternate;
+  animation-delay: 1s;
+}
+
+@keyframes dot-flashing {
+  0% {
+    background-color: var(--dot-color);
+  }
+  50%,
+  100% {
+    background-color: rgba(152, 128, 255, 0.2);
+  }
+}