From 5b5281e50c06276cbaea9d814f62685c0c0b23ee Mon Sep 17 00:00:00 2001
From: Prathamesh Gursal <prathmeshgursal3110@gmail.com>
Date: Wed, 9 Oct 2024 01:28:54 +0530
Subject: [PATCH] added customize loader for each section

---
 frontend/src/settings/APIKeys.tsx   |   2 +-
 frontend/src/settings/Analytics.tsx |   6 +-
 frontend/src/settings/Documents.tsx |   2 +-
 frontend/src/settings/Logs.tsx      |   2 +-
 frontend/src/utils/loader.tsx       | 138 +++++++++++++++++++++-------
 5 files changed, 112 insertions(+), 38 deletions(-)

diff --git a/frontend/src/settings/APIKeys.tsx b/frontend/src/settings/APIKeys.tsx
index eb9c14e8..07370541 100644
--- a/frontend/src/settings/APIKeys.tsx
+++ b/frontend/src/settings/APIKeys.tsx
@@ -107,7 +107,7 @@ export default function APIKeys() {
         <div className="mt-[27px] w-full">
           <div className="w-full overflow-x-auto">
             {loading ? (
-              <SkeletonLoader />
+              <SkeletonLoader count={1} component={'chatbot'} />
             ) : (
               <table className="table-default">
                 <thead>
diff --git a/frontend/src/settings/Analytics.tsx b/frontend/src/settings/Analytics.tsx
index b6948d70..6103c35e 100644
--- a/frontend/src/settings/Analytics.tsx
+++ b/frontend/src/settings/Analytics.tsx
@@ -223,7 +223,7 @@ export default function Analytics() {
                 className="flex flex-row items-center justify-end"
               ></div>
               {loadingMessages ? (
-                <SkeletonLoader count={1} />
+                <SkeletonLoader count={1} component={'analysis'} />
               ) : (
                 <AnalyticsChart
                   data={{
@@ -274,7 +274,7 @@ export default function Analytics() {
                 className="flex flex-row items-center justify-end"
               ></div>
               {loadingTokens ? (
-                <SkeletonLoader />
+                <SkeletonLoader count={1} component={'analysis'} />
               ) : (
                 <AnalyticsChart
                   data={{
@@ -327,7 +327,7 @@ export default function Analytics() {
                 className="flex flex-row items-center justify-end"
               ></div>
               {loadingFeedback ? (
-                <SkeletonLoader />
+                <SkeletonLoader count={1} component={'analysis'} />
               ) : (
                 <AnalyticsChart
                   data={{
diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index f1cfc0b9..fd7f1165 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -64,7 +64,7 @@ const Documents: React.FC<DocumentsProps> = ({
       <div className="flex flex-col relative">
         <div className="z-10 w-full overflow-x-auto">
           {loading ? (
-            <SkeletonLoader />
+            <SkeletonLoader count={1} />
           ) : (
             <table className="table-default">
               <thead>
diff --git a/frontend/src/settings/Logs.tsx b/frontend/src/settings/Logs.tsx
index 28bca57f..1e2bd953 100644
--- a/frontend/src/settings/Logs.tsx
+++ b/frontend/src/settings/Logs.tsx
@@ -105,7 +105,7 @@ export default function Logs() {
 
       <div className="mt-8">
         {loadingLogs ? (
-          <SkeletonLoader />
+          <SkeletonLoader component={'logs'} />
         ) : (
           <LogsTable logs={logs} setPage={setPage} />
         )}
diff --git a/frontend/src/utils/loader.tsx b/frontend/src/utils/loader.tsx
index de9cf766..a9548d6d 100644
--- a/frontend/src/utils/loader.tsx
+++ b/frontend/src/utils/loader.tsx
@@ -2,9 +2,13 @@ import React, { useState, useEffect } from 'react';
 
 interface SkeletonLoaderProps {
   count?: number;
+  component?: 'default' | 'analysis' | 'chatbot' | 'logs';
 }
 
-const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({ count = 1 }) => {
+const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
+  count = 1,
+  component = 'default',
+}) => {
   const [skeletonCount, setSkeletonCount] = useState(count);
 
   useEffect(() => {
@@ -30,38 +34,108 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({ count = 1 }) => {
 
   return (
     <div className="flex flex-col space-y-4">
-      {[...Array(skeletonCount)].map((_, idx) => (
-        <div
-          key={idx}
-          className={`p-6 ${skeletonCount === 1 ? 'w-full' : 'w-60'} bg-gray-800 rounded-3xl animate-pulse`}
-        >
-          <div className="space-y-4">
-            <div>
-              <div className="h-4 bg-gray-500 rounded mb-2 w-3/4"></div>{' '}
-              <div className="h-4 bg-gray-500 rounded mb-2 w-5/6"></div>{' '}
-              <div className="h-4 bg-gray-500 rounded mb-2 w-1/2"></div>{' '}
-              <div className="h-4 bg-gray-500 rounded mb-2 w-3/4"></div>{' '}
-              <div className="h-4 bg-gray-500 rounded mb-2 w-full"></div>{' '}
+      {component === 'default'
+        ? [...Array(skeletonCount)].map((_, idx) => (
+            <div
+              key={idx}
+              className={`p-6 ${skeletonCount === 1 ? 'w-full' : 'w-60'} dark:bg-raisin-black rounded-3xl animate-pulse`}
+            >
+              <div className="space-y-4">
+                <div>
+                  <div className="h-4 bg-gray-600 rounded mb-2 w-3/4"></div>
+                  <div className="h-4 bg-gray-600 rounded mb-2 w-5/6"></div>
+                  <div className="h-4 bg-gray-600 rounded mb-2 w-1/2"></div>
+                  <div className="h-4 bg-gray-600 rounded mb-2 w-3/4"></div>
+                  <div className="h-4 bg-gray-600 rounded mb-2 w-full"></div>
+                </div>
+                <div className="border-t border-gray-600 my-4"></div>
+                <div>
+                  <div className="h-4 bg-gray-600 rounded mb-2 w-2/3"></div>
+                  <div className="h-4 bg-gray-600 rounded mb-2 w-1/4"></div>
+                  <div className="h-4 bg-gray-600 rounded mb-2 w-full"></div>
+                </div>
+                <div className="border-t border-gray-600 my-4"></div>
+                <div>
+                  <div className="h-4 bg-gray-600 rounded mb-2 w-5/6"></div>
+                  <div className="h-4 bg-gray-600 rounded mb-2 w-1/3"></div>
+                  <div className="h-4 bg-gray-600 rounded mb-2 w-2/3"></div>
+                  <div className="h-4 bg-gray-600 rounded mb-2 w-full"></div>
+                </div>
+                <div className="border-t border-gray-600 my-4"></div>
+                <div className="h-4 bg-gray-600 rounded w-3/4 mb-2"></div>
+                <div className="h-4 bg-gray-600 rounded w-5/6 mb-2"></div>
+              </div>
             </div>
-            <div className="border-t border-gray-600 my-4"></div>{' '}
-            <div>
-              <div className="h-4 bg-gray-500 rounded mb-2 w-2/3"></div>{' '}
-              <div className="h-4 bg-gray-500 rounded mb-2 w-1/4"></div>{' '}
-              <div className="h-4 bg-gray-500 rounded mb-2 w-full"></div>{' '}
-            </div>
-            <div className="border-t border-gray-600 my-4"></div>{' '}
-            <div>
-              <div className="h-4 bg-gray-500 rounded mb-2 w-5/6"></div>{' '}
-              <div className="h-4 bg-gray-500 rounded mb-2 w-1/3"></div>{' '}
-              <div className="h-4 bg-gray-500 rounded mb-2 w-2/3"></div>{' '}
-              <div className="h-4 bg-gray-500 rounded mb-2 w-full"></div>{' '}
-            </div>
-            <div className="border-t border-gray-600 my-4"></div>{' '}
-            <div className="h-4 bg-gray-500 rounded w-3/4 mb-2"></div>{' '}
-            <div className="h-4 bg-gray-500 rounded w-5/6 mb-2"></div>{' '}
-          </div>
-        </div>
-      ))}
+          ))
+        : component === 'analysis'
+          ? [...Array(skeletonCount)].map((_, idx) => (
+              <div
+                key={idx}
+                className="p-6 w-full dark:bg-raisin-black rounded-3xl animate-pulse"
+              >
+                <div className="space-y-6">
+                  <div className="space-y-2">
+                    <div className="h-4 bg-gray-600 rounded w-1/3 mb-4"></div>
+                    <div className="grid grid-cols-6 gap-2 items-end">
+                      <div className="h-32 bg-gray-600 rounded"></div>
+                      <div className="h-24 bg-gray-600 rounded"></div>
+                      <div className="h-40 bg-gray-600 rounded"></div>
+                      <div className="h-28 bg-gray-600 rounded"></div>
+                      <div className="h-36 bg-gray-600 rounded"></div>
+                      <div className="h-20 bg-gray-600 rounded"></div>
+                    </div>
+                  </div>
+                  <div className="space-y-2">
+                    <div className="h-4 bg-gray-600 rounded w-1/4 mb-4"></div>
+                    <div className="h-32 bg-gray-600 rounded"></div>
+                  </div>
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="h-4 bg-gray-600 rounded w-full"></div>
+                    <div className="h-4 bg-gray-600 rounded w-full"></div>
+                  </div>
+                </div>
+              </div>
+            ))
+          : component === 'chatbot'
+            ? [...Array(skeletonCount)].map((_, idx) => (
+                <div
+                  key={idx}
+                  className="p-4 w-full max-w-sm mx-auto animate-pulse"
+                >
+                  <div className="flex items-start space-x-2">
+                    <div className="w-8 h-8 bg-gray-600 rounded-full"></div>
+                    <div className="flex-1 space-y-2">
+                      <div className="p-3 rounded-lg bg-gray-600">
+                        <div className="h-4 bg-gray-500 rounded w-3/4 mb-2"></div>
+                        <div className="h-4 bg-gray-500 rounded w-2/4"></div>
+                      </div>
+                      <div className="p-3 rounded-lg bg-gray-600">
+                        <div className="h-4 bg-gray-500 rounded w-5/6 mb-2"></div>
+                        <div className="h-4 bg-gray-500 rounded w-3/4"></div>
+                      </div>
+                      <div className="flex space-x-1">
+                        <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
+                        <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
+                        <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))
+            : [...Array(skeletonCount)].map((_, idx) => (
+                <div
+                  key={idx}
+                  className="p-6 w-full dark:bg-raisin-black rounded-3xl animate-pulse"
+                >
+                  <div className="space-y-4">
+                    <div className="h-4 bg-gray-600 rounded w-1/2"></div>
+                    <div className="h-4 bg-gray-600 rounded w-5/6"></div>
+                    <div className="h-4 bg-gray-600 rounded w-3/4"></div>
+                    <div className="h-4 bg-gray-600 rounded w-2/3"></div>
+                    <div className="h-4 bg-gray-600 rounded w-1/4"></div>
+                  </div>
+                </div>
+              ))}
     </div>
   );
 };