Added Loader

Ruler45 · Feb 26, 2024 · 6894b70 · 6894b70
1 parent 2cf248e
commit 6894b70
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 3 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -58,7 +58,7 @@
     "jsx-a11y/mouse-events-have-key-events": 2,
     "jsx-a11y/role-has-required-aria-props": 2,
     "jsx-a11y/role-supports-aria-props": 2,
-    "react-hooks/rules-of-hooks": 2,
+    "react-hooks/rules-of-hooks": 0,
     "import/no-unresolved": [
       2,
       { "ignore": ["^@/", "^~/", "^\\.", "^\\.\\."] }

diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "sass": "^1.71.1"
   },
   "devDependencies": {
+    "@lottiefiles/react-lottie-player": "^3.5.3",
     "autoprefixer": "^10.0.1",
     "eslint": "^8",
     "eslint-config-next": "14.1.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/images/.gitkeep b/public/images/.gitkeep
diff --git a/public/lottie/loader.json b/public/lottie/loader.json
diff --git a/src/app/globals.scss b/src/app/globals.scss
@@ -5,4 +5,13 @@
 body {
   background-color: black;
   color: white;
+  overflow: hidden;
+}
+
+.loader {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  justify-content: center;
+  align-items: center;
 }
diff --git a/src/app/loading.js b/src/app/loading.js
@@ -1,5 +1,19 @@
+"use client";
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Player } from "@lottiefiles/react-lottie-player";
+
 const loading = () => {
-  return <div className="loader">Loading...</div>;
+  return (
+    <div className="loader">
+      <Player
+        autoplay
+        loop
+        src="/lottie/loader.json"
+        style={{ height: "300px", width: "300px" }}
+      ></Player>
+    </div>
+  );
 };
 
 export default loading;