From 6a571f32acbb5a9b8ed9fc5d62ce76df2208ad7e Mon Sep 17 00:00:00 2001
From: Nimit Haria <nimitharia007@gmail.com>
Date: Tue, 2 Apr 2024 01:24:36 +0530
Subject: [PATCH 1/2] fix: added proper animated loading screen for history
 page

---
 src/app/history/loading.tsx | 28 +++++++++++++++++++++++-----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/app/history/loading.tsx b/src/app/history/loading.tsx
index 467c3a68b..ba07a6c36 100644
--- a/src/app/history/loading.tsx
+++ b/src/app/history/loading.tsx
@@ -1,11 +1,29 @@
-import { CourseSkeleton } from '@/components/CourseCard';
+import { Fragment } from 'react';
 
 export default function Loading() {
   return (
-    <div className="max-w-screen-xl justify-between mx-auto p-4 cursor-pointer grid grid-cols-1 gap-5 md:grid-cols-3">
-      {[1, 2, 3].map((v) => (
-        <CourseSkeleton key={v} />
-      ))}
+    <div className="px-4 md:px-20 py-5">
+      <div className="rounded bg-slate-50 dark:bg-slate-900 h-8 w-40"></div>
+      <div className="flex flex-col gap-4 my-4 sm:my-8 max-w-full">
+        {[1, 2].map((_, index) => {
+          return (
+            <Fragment key={index}>
+              <div className="rounded bg-slate-50 dark:bg-slate-900 h-6 w-20"></div>
+              <div className="flex items-center gap-4">
+                {[1, 2, 3, 4, 5].map((_, index) => (
+                  <div>
+                    <div
+                      className="w-60 h-40 bg-slate-50 dark:bg-slate-900"
+                      key={index}
+                    />
+                    <div className="rounded my-4 bg-slate-50 dark:bg-slate-900 h-4 w-full"></div>
+                  </div>
+                ))}
+              </div>
+            </Fragment>
+          );
+        })}
+      </div>
     </div>
   );
 }

From 15227af9c5bb551f7460bddf92a791ef54781d36 Mon Sep 17 00:00:00 2001
From: Nimit Haria <nimitharia007@gmail.com>
Date: Tue, 2 Apr 2024 01:34:10 +0530
Subject: [PATCH 2/2] fixed css

---
 src/app/history/loading.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/history/loading.tsx b/src/app/history/loading.tsx
index ba07a6c36..049fe2cbc 100644
--- a/src/app/history/loading.tsx
+++ b/src/app/history/loading.tsx
@@ -9,11 +9,11 @@ export default function Loading() {
           return (
             <Fragment key={index}>
               <div className="rounded bg-slate-50 dark:bg-slate-900 h-6 w-20"></div>
-              <div className="flex items-center gap-4">
-                {[1, 2, 3, 4, 5].map((_, index) => (
+              <div className="flex items-center gap-6">
+                {[1, 2, 3, 4].map((_, index) => (
                   <div>
                     <div
-                      className="w-60 h-40 bg-slate-50 dark:bg-slate-900"
+                      className="w-[260px] h-36 bg-slate-50 dark:bg-slate-900 rounded-md"
                       key={index}
                     />
                     <div className="rounded my-4 bg-slate-50 dark:bg-slate-900 h-4 w-full"></div>