From b59170078db3064db1e42e08b79e8e3ac35bef71 Mon Sep 17 00:00:00 2001
From: Prathamesh Gursal <prathmeshgursal3110@gmail.com>
Date: Tue, 8 Oct 2024 01:19:26 +0530
Subject: [PATCH] make single  loader  more responsive

---
 frontend/src/settings/APIKeys.tsx   |  2 +-
 frontend/src/settings/Analytics.tsx | 29 +++++++-------
 frontend/src/settings/Documents.tsx |  2 +-
 frontend/src/settings/Logs.tsx      |  4 +-
 frontend/src/utils/loader.tsx       | 62 ++++++++++++++++++++++++-----
 package-lock.json                   |  2 +-
 6 files changed, 71 insertions(+), 30 deletions(-)

diff --git a/frontend/src/settings/APIKeys.tsx b/frontend/src/settings/APIKeys.tsx
index e05f3a1f..eb9c14e8 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 count={3} />
+              <SkeletonLoader />
             ) : (
               <table className="table-default">
                 <thead>
diff --git a/frontend/src/settings/Analytics.tsx b/frontend/src/settings/Analytics.tsx
index b736f6ad..b6948d70 100644
--- a/frontend/src/settings/Analytics.tsx
+++ b/frontend/src/settings/Analytics.tsx
@@ -18,6 +18,7 @@ import { APIKeyData } from './types';
 
 import type { ChartData } from 'chart.js';
 import SkeletonLoader from '../utils/loader';
+
 ChartJS.register(
   CategoryScale,
   LinearScale,
@@ -100,7 +101,7 @@ export default function Analytics() {
   };
 
   const fetchTokenData = async (chatbot_id?: string, filter?: string) => {
-    setLoadingTokens(true); // Start loading
+    setLoadingTokens(true);
     try {
       const response = await userService.getTokenAnalytics({
         api_key_id: chatbot_id,
@@ -195,7 +196,7 @@ export default function Analytics() {
 
         {/* Messages Analytics */}
         <div className="mt-8 w-full flex flex-col [@media(min-width:1080px)]:flex-row gap-3">
-          <div className="h-[345px] [@media(min-width:1080px)]:w-1/2 w-full px-6 py-5 border rounded-2xl border-silver dark:border-silver/40">
+          <div className="h-[345px] [@media(min-width:1080px)]:w-1/2 w-full px-6 py-5 border rounded-2xl border-silver dark:border-silver/40 overflow-hidden">
             <div className="flex flex-row items-center justify-start gap-3">
               <p className="font-bold text-jet dark:text-bright-gray">
                 Messages
@@ -246,7 +247,7 @@ export default function Analytics() {
           </div>
 
           {/* Token Usage Analytics */}
-          <div className="h-[345px] [@media(min-width:1080px)]:w-1/2 w-full px-6 py-5 border rounded-2xl border-silver dark:border-silver/40">
+          <div className="h-[345px] [@media(min-width:1080px)]:w-1/2 w-full px-6 py-5 border rounded-2xl border-silver dark:border-silver/40 overflow-hidden">
             <div className="flex flex-row items-center justify-start gap-3">
               <p className="font-bold text-jet dark:text-bright-gray">
                 Token Usage
@@ -273,7 +274,7 @@ export default function Analytics() {
                 className="flex flex-row items-center justify-end"
               ></div>
               {loadingTokens ? (
-                <SkeletonLoader count={1} />
+                <SkeletonLoader />
               ) : (
                 <AnalyticsChart
                   data={{
@@ -298,11 +299,11 @@ export default function Analytics() {
         </div>
 
         {/* Feedback Analytics */}
-        <div className="mt-8 w-full">
-          <div className="h-[345px] w-full px-6 py-5 border rounded-2xl border-silver dark:border-silver/40">
+        <div className="mt-8 w-full flex flex-col gap-3">
+          <div className="h-[345px] w-full px-6 py-5 border rounded-2xl border-silver dark:border-silver/40 overflow-hidden">
             <div className="flex flex-row items-center justify-start gap-3">
               <p className="font-bold text-jet dark:text-bright-gray">
-                User Feedback
+                Feedback
               </p>
               <Dropdown
                 size="w-[125px]"
@@ -326,7 +327,7 @@ export default function Analytics() {
                 className="flex flex-row items-center justify-end"
               ></div>
               {loadingFeedback ? (
-                <SkeletonLoader count={1} />
+                <SkeletonLoader />
               ) : (
                 <AnalyticsChart
                   data={{
@@ -335,24 +336,24 @@ export default function Analytics() {
                     ),
                     datasets: [
                       {
-                        label: 'Positive',
+                        label: 'Positive Feedback',
                         data: Object.values(feedbackData || {}).map(
                           (item) => item.positive,
                         ),
-                        backgroundColor: '#8BD154',
+                        backgroundColor: '#7D54D1',
                       },
                       {
-                        label: 'Negative',
+                        label: 'Negative Feedback',
                         data: Object.values(feedbackData || {}).map(
                           (item) => item.negative,
                         ),
-                        backgroundColor: '#D15454',
+                        backgroundColor: '#FF6384',
                       },
                     ],
                   }}
                   legendID="legend-container-3"
-                  maxTicksLimitInX={10}
-                  isStacked={true}
+                  maxTicksLimitInX={8}
+                  isStacked={false}
                 />
               )}
             </div>
diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index a5e5efb7..f1cfc0b9 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 count={3} />
+            <SkeletonLoader />
           ) : (
             <table className="table-default">
               <thead>
diff --git a/frontend/src/settings/Logs.tsx b/frontend/src/settings/Logs.tsx
index 32d89564..28bca57f 100644
--- a/frontend/src/settings/Logs.tsx
+++ b/frontend/src/settings/Logs.tsx
@@ -69,7 +69,7 @@ export default function Logs() {
             Filter by chatbot
           </p>
           {loadingChatbots ? (
-            <SkeletonLoader count={1} />
+            <SkeletonLoader />
           ) : (
             <Dropdown
               size="w-[55vw] sm:w-[360px]"
@@ -105,7 +105,7 @@ export default function Logs() {
 
       <div className="mt-8">
         {loadingLogs ? (
-          <SkeletonLoader count={3} />
+          <SkeletonLoader />
         ) : (
           <LogsTable logs={logs} setPage={setPage} />
         )}
diff --git a/frontend/src/utils/loader.tsx b/frontend/src/utils/loader.tsx
index bbf8ba25..de9cf766 100644
--- a/frontend/src/utils/loader.tsx
+++ b/frontend/src/utils/loader.tsx
@@ -1,21 +1,64 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 
 interface SkeletonLoaderProps {
-  count?: number; // Optional prop to define the number of skeleton loaders
+  count?: number;
 }
 
 const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({ count = 1 }) => {
+  const [skeletonCount, setSkeletonCount] = useState(count);
+
+  useEffect(() => {
+    const handleResize = () => {
+      const windowWidth = window.innerWidth;
+
+      if (windowWidth > 1024) {
+        setSkeletonCount(1);
+      } else if (windowWidth > 768) {
+        setSkeletonCount(count);
+      } else {
+        setSkeletonCount(Math.min(count, 2));
+      }
+    };
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [count]);
+
   return (
-    <div className="flex space-x-4">
-      {[...Array(count)].map((_, idx) => (
+    <div className="flex flex-col space-y-4">
+      {[...Array(skeletonCount)].map((_, idx) => (
         <div
           key={idx}
-          className="p-6 w-60 h-32 bg-gray-800 rounded-3xl animate-pulse"
+          className={`p-6 ${skeletonCount === 1 ? 'w-full' : 'w-60'} bg-gray-800 rounded-3xl animate-pulse`}
         >
           <div className="space-y-4">
-            <div className="w-3/4 h-4 bg-gray-500 rounded"></div>
-            <div className="w-full h-4 bg-gray-500 rounded"></div>
-            <div className="w-5/6 h-4 bg-gray-500 rounded"></div>
+            <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>{' '}
+            </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>
       ))}
@@ -24,6 +67,3 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({ count = 1 }) => {
 };
 
 export default SkeletonLoader;
-
-// calling function should be pass --- no. of sketeton cards
-// eg .   ----------->>>    <SkeletonLoader count={4}   />
diff --git a/package-lock.json b/package-lock.json
index 1d8f28b5..9582c111 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "DocsGPT",
+  "name": "DocsGpt",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {