add skeleton loaders

appKom · Oct 21, 2024 · d553527 · d553527
1 parent 48d606c
commit d553527
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/components/graphs/PerformanceDisplay.tsx b/components/graphs/PerformanceDisplay.tsx
@@ -63,7 +63,11 @@ const PerformanceDisplay = () => {
             osebx={osebxData.data}
           />
         ) : (
-          <div>Loading...</div>
+          <div className="px-5">
+            <div className="flex flex-col items-center justify-center gap-4 text-center w-full h-full animate-pulse">
+              <div className="overflow-hidden bg-gray-700 h-48 w-64 lg:w-96 lg:h-64" />
+            </div>
+          </div>
         )}
       </div>
 
@@ -74,7 +78,11 @@ const PerformanceDisplay = () => {
         {compositionData ? (
           <Table columns={columns} data={compositionData.composition} />
         ) : (
-          <div>Loading...</div>
+          <div className="px-5">
+            <div className="flex flex-col items-center justify-center gap-4 text-center w-full h-full animate-pulse">
+              <div className="overflow-hidden bg-gray-700 h-48 w-64 lg:w-96 lg:h-64" />
+            </div>
+          </div>
         )}
       </div>
     </div>