Fix: web tab icon

shinevue · Jun 23, 2024 · 185c107 · 185c107
1 parent d13715c
commit 185c107
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 46 deletions.
diff --git a/public/assets/images/language.png b/public/assets/images/language.png
diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
+    <link rel="icon" href="./assets/images/icon.png" />
+    <title>Bible Quiz</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.js b/src/App.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 
 import "./App.css";
@@ -7,34 +7,59 @@ import MenuBookIcon from "@mui/icons-material/MenuBook";
 import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 
 export default function App() {
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setLoading(false);
+    }, 2000);
+  }, []);
+
   return (
-    <div
-      className="d-flex align-items-center justify-content-center"
-      md={5}
-      sm={12}
-    >
-      <div className="flex justify-center items-center gap-10 sm:gap-16 md:gap-24 xl:gap-32 flex-col sm:flex-row w-full h-screen pt-96 bg-gradient-to-b from-emerald-200 ">
-        <Link to="/instruction">
-          <Button
-            className="w-40 h-12 md:w-48 md:h-14 xl:w-56 xl:h-16 gap-4  "
-            variant="contained"
-            color="info"
-          >
-            <div className="text-md md:text-lg xl:text-xl">Instruction</div>
-            <MenuBookIcon />
-          </Button>
-        </Link>
-        <Link to="/before">
-          <Button
-            className="w-40 h-12 md:w-48 md:h-14 xl:w-56 xl:h-16 gap-4"
-            variant="contained"
-            color="success"
-          >
-            <div className="text-md md:text-lg xl:text-xl">Start</div>
-            <PlayArrowIcon />
-          </Button>
-        </Link>
+    <>
+      <div
+        className="d-flex align-items-center justify-content-center"
+        md={5}
+        sm={12}
+      >
+        <div className="flex justify-center items-center gap-10 sm:gap-16 md:gap-24 xl:gap-32 flex-col sm:flex-row w-full h-screen pt-96 bg-gradient-to-b from-emerald-200 ">
+          {loading ? (
+            <div className="w-full flex justify-center h-screen items-center">
+              <div className="loading-wave">
+                <div className="loading-bar"></div>
+                <div className="loading-bar"></div>
+                <div className="loading-bar"></div>
+                <div className="loading-bar"></div>
+              </div>
+            </div>
+          ) : (
+            <>
+              <Link to="/instruction">
+                <Button
+                  className="w-40 h-12 md:w-48 md:h-14 xl:w-56 xl:h-16 gap-4  "
+                  variant="contained"
+                  color="info"
+                >
+                  <div className="text-md md:text-lg xl:text-xl">
+                    Instruction
+                  </div>
+                  <MenuBookIcon />
+                </Button>
+              </Link>
+              <Link to="/before">
+                <Button
+                  className="w-40 h-12 md:w-48 md:h-14 xl:w-56 xl:h-16 gap-4"
+                  variant="contained"
+                  color="success"
+                >
+                  <div className="text-md md:text-lg xl:text-xl">Start</div>
+                  <PlayArrowIcon />
+                </Button>
+              </Link>
+            </>
+          )}
+        </div>
       </div>
-    </div>
+    </>
   );
 }
diff --git a/src/index.js b/src/index.js
@@ -1,7 +1,6 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 import "mdb-react-ui-kit/dist/css/mdb.min.css";
-// import reportWebVitals from "./reportWebVitals";
 import Basic from "./components/basic/Basic";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import App from "./App";

diff --git a/src/layout.tsx b/src/layout.tsx