Merge pull request #52 from bleu-fi/chart-skeleton

Add chart skeleton

src/components/ChartSkeleton.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Skeleton } from "./ui/Skeleton";
+
+function BarSet() {
+  return (
+    <>
+      <Skeleton className="h-48 w-10" />
+      <Skeleton className="h-64 w-10" />
+      <Skeleton className="h-56 w-10" />
+      <Skeleton className="h-64 w-10" />
+    </>
+  );
+}
+export function ChartSkeleton({ barsSetCount = 3, className = "" }) {
+  const barSet = new Array(barsSetCount).fill(null);
+
+  return (
+    <div className={`${className} p-4`}>
+      <div className="flex flex-col items-center">
+        <div className="flex items-end space-x-2">
+          <span className="sr-only">Loading...</span>
+          {barSet.map((_, barIndex) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <BarSet key={barIndex} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Plot/index.tsx

@@ -3,7 +3,13 @@ import { merge } from "lodash";
 import { PlotParams } from "react-plotly.js";
 import React, { Suspense, lazy } from "react";
 import { cn } from "#/lib";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "..";
+import {
+  ChartSkeleton,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "..";
 
 // @ts-ignore Type 'Promise<typeof /@types/react-plotly.js/index")>' is not assignable to type 'Promise<{ default: ComponentType<any>; }>'
 const PlotPrimitive = lazy(() => import("react-plotly.js"));
@@ -100,7 +106,7 @@ export function Plot(props: PlotProps) {
           <PlotTitle title={plotProps.title} tooltip={plotProps.toolTip} />
         )}
         {/* @ts-ignore */}
-        <Suspense fallback={<div>Loading...</div>}>
+        <Suspense fallback={<ChartSkeleton />}>
           <PlotPrimitive {...plotProps} />
         </Suspense>
       </div>

src/components/index.ts

@@ -13,3 +13,4 @@ export * from "./StrictModeDroppable";
 export * from "./Plot";
 export * from "./TableSkeleton";
 export * from "./KpiSkeleton";
+export * from "./ChartSkeleton";