Adds loading spinner to page.tsx file

Author: kylejoe

package.json

@@ -25,6 +25,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-simple-typewriter": "^5.0.1",
+    "react-spinners": "^0.13.8",
     "react-tsparticles": "^2.10.1",
     "tabler-icons-react": "^1.56.0",
     "typescript": "5.1.3"

src/app/page.tsx

@@ -1,5 +1,6 @@
 // https://stackoverflow.com/questions/74965849/youre-importing-a-component-that-needs-usestate-it-only-works-in-a-client-comp
 "use client"; // This is a client component 👈🏽
+import { PuffLoader } from "react-spinners";
 
 // css styling
 // import styles from "./page.module.css";
@@ -11,6 +12,8 @@ import { Skills } from "./components/Skills";
 import { Contact } from "./components/Contact";
 import { HeroImageBackground } from "./components/HeroImageBackground";
 
+import { useState, useEffect } from "react";
+
 const useStyles = createStyles((theme) => ({
   main: {
     // minHeight: "100vh",
@@ -32,6 +35,30 @@ const useStyles = createStyles((theme) => ({
 
 export default function Home() {
   const { classes } = useStyles();
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    setLoading(false);
+  }, []);
+
+  if (loading) {
+    return (
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "100vh",
+        }}
+      >
+        <PuffLoader
+          color="#1db954"
+          size={100}
+          loading={loading}
+          aria-label="Loading Spinner"
+        />
+      </div>
+    );
+  }
   return (
     <main className={classes.main}>
       <HeroImageBackground />

yarn.lock

@@ -2405,6 +2405,11 @@ react-simple-typewriter@^5.0.1:
   resolved "https://registry.yarnpkg.com/react-simple-typewriter/-/react-simple-typewriter-5.0.1.tgz#cfdb896c868a55ed4d5f1f06d62b3a9d0f5ad9d7"
   integrity sha512-vA5HkABwJKL/DJ4RshSlY/igdr+FiVY4MLsSQYJX6FZG/f1/VwN4y1i3mPXRyfaswrvI8xii1kOVe1dYtO2Row==
 
+react-spinners@^0.13.8:
+  version "0.13.8"
+  resolved "https://registry.yarnpkg.com/react-spinners/-/react-spinners-0.13.8.tgz#5262571be0f745d86bbd49a1e6b49f9f9cb19acc"
+  integrity sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==
+
 react-style-singleton@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"