Preloader Added

package.json

@@ -40,12 +40,15 @@
     "@types/node": "18.7.18",
     "@types/react": "18.0.20",
     "@types/react-dom": "18.0.6",
+    "autoprefixer": "^10.4.12",
     "eslint": "8.23.1",
     "eslint-config-next": "12.3.0",
     "husky": "^8.0.1",
     "jest": "^29.2.0",
     "lint-staged": "^13.0.3",
+    "postcss": "^8.4.18",
     "prettier": "2.7.1",
+    "tailwindcss": "^3.2.1",
     "typescript": "4.8.3"
   }
 }

pages/_app.tsx

@@ -1,13 +1,38 @@
-import '../styles/globals.css'
-import type { AppProps } from 'next/app'
-import { ChakraProvider } from '@chakra-ui/react';
-import 'react-toastify/dist/ReactToastify.css';
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
+import { ChakraProvider } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+import "react-toastify/dist/ReactToastify.css";
 function MyApp({ Component, pageProps }: AppProps) {
+  const [isLoading, setIsLoading] = useState(true);
+
+  const handleLoading = () => {
+    if (document.readyState === "complete") {
+      setIsLoading(false);
+    } else {
+      setTimeout(handleLoading, 100);
+    }
+  };
+
+  useEffect(() => {
+    handleLoading();
+  }, []);
   return (
-    <ChakraProvider>
-         <Component {...pageProps} />
-    </ChakraProvider>
-  )
+    <div
+      className={`relative ${isLoading && "max-h-screen overflow-y-hidden"}`}
+    >
+      <div
+        className={`${
+          isLoading ? "flex" : "hidden"
+        } z-[9999] bg-[#121212] absolute inset-0 justify-center items-center`}
+      >
+        <div className="h-20 w-20 border-[#6bd968] rounded-full border-t-2 border-b-2 animate-spin" />
+      </div>
+      <ChakraProvider>
+        <Component {...pageProps} />
+      </ChakraProvider>
+    </div>
+  );
 }
 
-export default MyApp
+export default MyApp;

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

styles/globals.css

@@ -21,4 +21,8 @@
  body {
     background-color: var(--background)!important ;
     color: var(--color) !important ;
-}
+}
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./pages/**/*.{ts,tsx,js,jsx}",
+    "./components/**/*.{ts,tsx,js,jsx}",
+  ],
+  mode: "jit",
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};