From 34eb8d0ce0fa40950098806762b618785cfb1815 Mon Sep 17 00:00:00 2001
From: Haroon <aitchkhan@gmail.com>
Date: Sat, 14 Sep 2024 01:55:08 +0500
Subject: [PATCH] update scripts

---
 src/App.css                            | 107 +++++++++++++++++++++++++
 src/component/MainScreen/MainScreen.js |  16 +++-
 src/component/Skeleton/Skeleton.js     |  26 ++++++
 3 files changed, 145 insertions(+), 4 deletions(-)
 create mode 100644 src/component/Skeleton/Skeleton.js

diff --git a/src/App.css b/src/App.css
index 74b5e05..f780d3e 100644
--- a/src/App.css
+++ b/src/App.css
@@ -7,6 +7,11 @@
   pointer-events: none;
 }
 
+@font-face {
+  font-family: 'Virgil';
+  src: url('https://excalidraw.com/Virgil.woff2') format('woff2');
+}
+
 @media (prefers-reduced-motion: no-preference) {
   .App-logo {
     animation: App-logo-spin infinite 20s linear;
@@ -36,3 +41,105 @@
     transform: rotate(360deg);
   }
 }
+
+.skeleton-card {
+  background-color: #fff;
+  border-radius: 8px;
+  border: 1px solid #e0e0e0;
+  overflow: hidden;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s, box-shadow 0.3s;
+  max-width: 100%;
+  width: 100%;
+}
+
+.skeleton-card-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.skeleton-card-image {
+  width: 100%;
+  object-fit: cover;
+  border-radius: 4px;
+  display: block;
+  height: 150px;
+  background-color: #ccc;
+  margin-bottom: 10px;
+  animation: skeleton-line 1.5s infinite;
+}
+
+.skeleton-card-description {
+  width: 100%;
+  height: 40px;
+  background-color: #ccc;
+  border-radius: 5px;
+  animation: skeleton-line 1.5s infinite;
+}
+
+@keyframes skeleton-line {
+  0% {
+    background-position: left;
+  }
+  100% {
+    background-position: right;
+  }
+}
+
+.skeleton-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr); /* Adjust the number of columns as needed */
+  grid-gap: 20px;
+  padding: 20px;
+}
+
+/* Skeleton Text */
+.skeleton-card-text {
+  width: 80%;
+  height: 20px;
+  background-color: #ddd;
+  border-radius: 4px;
+  position: relative;
+  overflow: hidden;
+  margin: 0;
+  color: #36454F;
+  font-weight: 500;
+  padding: 5px;
+}
+
+/* Animation to make skeleton "run" (pulse effect) */
+.skeleton-image::before,
+.skeleton-card-description::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 200%;
+  height: 100%;
+  background: linear-gradient(
+    to right,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.5) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  animation: loading 2.0s infinite;
+}
+
+/* Keyframes for pulsing animation */
+@keyframes loading {
+  0% {
+    left: -100%;
+  }
+  50% {
+    left: 0;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
+.ehsaandraw {
+  font-family: 'Cascadia', sans-serif;
+  font-size: 24px;
+}
\ No newline at end of file
diff --git a/src/component/MainScreen/MainScreen.js b/src/component/MainScreen/MainScreen.js
index 1f3c60e..a777188 100644
--- a/src/component/MainScreen/MainScreen.js
+++ b/src/component/MainScreen/MainScreen.js
@@ -13,8 +13,13 @@ import EditPage from "../Edit Page/EditScreen";
 import { useGithub } from "../../context";
 import toast from "react-hot-toast";
 import { SquarePlus } from "lucide-react";
+import SkeletonGrid from "../Skeleton/Skeleton";
+
+
+import '../../App.css'
 
 const MainApplication = () => {
+  const [isLoading, setIsLoading] = useState(false);
   const [open, setOpen] = useState(false);
   const [userName, setUserName] = useState("");
   const [scenes, setScenes] = useState([]);
@@ -50,12 +55,14 @@ const MainApplication = () => {
 
   useEffect(() => {
     const getData = async () => {
+      setIsLoading(true);
       const appdataRef = collection(database, "users", `${githubId}/scenes`);
       const docSnap = await getDocs(appdataRef);
       const fetchedValues = docSnap.docs.map((doc) => ({
         ...doc.data(),
         id: doc.id,
       }));
+      setIsLoading(false);
       setValues(fetchedValues);
       setFilteredValues(fetchedValues); // Initialize filtered data
     };
@@ -116,18 +123,18 @@ const MainApplication = () => {
             color: "#fff",
           }}
         >
-          <h1
+          <h1 class = "ehsaandraw"
             style={{
               marginLeft: "70px",
               color: "#000", // Set text color to white for a dark background
-              textShadow: "2px 2px 8px #444", // Subtle shadow effect for better readability
+              // textShadow: "2px 2px 8px #444", // Subtle shadow effect for better readability
               fontSize: "3rem", // Increase text size for emphasis
               fontWeight: "bold", // Bold font for better visibility
               letterSpacing: "2px", // Adds spacing between letters for a clean look
               margin:0
             }}
           >
-            Ehsaan Draw
+            EhsaanDraw
           </h1>
         </div>
         <div
@@ -330,13 +337,14 @@ const MainApplication = () => {
           marginLeft: "10px",
         }}
       >
+      {isLoading ? <SkeletonGrid /> :
         <CardList
           id={id}
           values={filteredValues}
           handleDelete={handleDelete}
           handleEdit={handleEdit}
           scenes={scenes}
-        />
+        /> }
       </div>
     </div>
   );
diff --git a/src/component/Skeleton/Skeleton.js b/src/component/Skeleton/Skeleton.js
new file mode 100644
index 0000000..3a6ae6c
--- /dev/null
+++ b/src/component/Skeleton/Skeleton.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import '../../App.css'
+function SkeletonCard() {
+  return (
+    <div className="skeleton-card">
+        <div className="skeleton-card-content">
+          <div className="skeleton-card-image"></div>
+          <div className="skeleton-card-description"></div>
+        </div>
+    
+    </div>
+  );
+}
+
+
+function SkeletonGrid() {
+  return (
+    <div className="skeleton-grid">
+    {Array.from({ length: 7 }).map((_, index) => (
+      <SkeletonCard key={index} />
+    ))}
+  </div>
+  );
+}
+
+export default SkeletonGrid;
\ No newline at end of file