@quillsql/react 1.7.1 → 1.7.3

package/lib/lib/inputTypes.d.ts

@@ -0,0 +1,20 @@
+export type ValueFormatter = {
+    (value: number): string;
+};
+declare const iconVariantValues: readonly ["simple", "light", "shadow", "solid", "outlined"];
+export type IconVariant = (typeof iconVariantValues)[number];
+export type HorizontalPosition = 'left' | 'right';
+export type VerticalPosition = 'top' | 'bottom';
+export type ButtonVariant = 'primary' | 'secondary' | 'light';
+declare const deltaTypeValues: readonly ["increase", "moderateIncrease", "decrease", "moderateDecrease", "unchanged"];
+export type DeltaType = (typeof deltaTypeValues)[number];
+declare const sizeValues: readonly ["xs", "sm", "md", "lg", "xl"];
+export type Size = (typeof sizeValues)[number];
+declare const colorValues: readonly ["slate", "gray", "zinc", "neutral", "stone", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"];
+export type Color = (typeof colorValues)[number];
+declare const justifyContentValues: readonly ["start", "end", "center", "between", "around", "evenly"];
+export type JustifyContent = (typeof justifyContentValues)[number];
+declare const alignItemsValues: readonly ["start", "end", "center", "baseline", "stretch"];
+export type AlignItems = (typeof alignItemsValues)[number];
+export type FlexDirection = 'row' | 'col' | 'row-reverse' | 'col-reverse';
+export {};

package/lib/lib/inputTypes.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const iconVariantValues = [
+    'simple',
+    'light',
+    'shadow',
+    'solid',
+    'outlined',
+];
+const deltaTypeValues = [
+    'increase',
+    'moderateIncrease',
+    'decrease',
+    'moderateDecrease',
+    'unchanged',
+];
+const sizeValues = ['xs', 'sm', 'md', 'lg', 'xl'];
+const colorValues = [
+    'slate',
+    'gray',
+    'zinc',
+    'neutral',
+    'stone',
+    'red',
+    'orange',
+    'amber',
+    'yellow',
+    'lime',
+    'green',
+    'emerald',
+    'teal',
+    'cyan',
+    'sky',
+    'blue',
+    'indigo',
+    'violet',
+    'purple',
+    'fuchsia',
+    'pink',
+    'rose',
+];
+const justifyContentValues = [
+    'start',
+    'end',
+    'center',
+    'between',
+    'around',
+    'evenly',
+];
+const alignItemsValues = [
+    'start',
+    'end',
+    'center',
+    'baseline',
+    'stretch',
+];
+//# sourceMappingURL=inputTypes.js.map

package/lib/lib/inputTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputTypes.js","sourceRoot":"","sources":["../../src/lib/inputTypes.ts"],"names":[],"mappings":";;AAIA,MAAM,iBAAiB,GAAG;IACxB,QAAQ;IACR,OAAO;IACP,QAAQ;IACR,OAAO;IACP,UAAU;CACF,CAAC;AAUX,MAAM,eAAe,GAAG;IACtB,UAAU;IACV,kBAAkB;IAClB,UAAU;IACV,kBAAkB;IAClB,WAAW;CACH,CAAC;AAIX,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAC;AAI3D,MAAM,WAAW,GAAG;IAClB,OAAO;IACP,MAAM;IACN,MAAM;IACN,SAAS;IACT,OAAO;IACP,KAAK;IACL,QAAQ;IACR,OAAO;IACP,QAAQ;IACR,MAAM;IACN,OAAO;IACP,SAAS;IACT,MAAM;IACN,MAAM;IACN,KAAK;IACL,MAAM;IACN,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,SAAS;IACT,MAAM;IACN,MAAM;CACE,CAAC;AAIX,MAAM,oBAAoB,GAAG;IAC3B,OAAO;IACP,KAAK;IACL,QAAQ;IACR,SAAS;IACT,QAAQ;IACR,QAAQ;CACA,CAAC;AAGX,MAAM,gBAAgB,GAAG;IACvB,OAAO;IACP,KAAK;IACL,QAAQ;IACR,UAAU;IACV,SAAS;CACD,CAAC"}

package/lib/lib/utils.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ValueFormatter } from './inputTypes';
+export declare const defaultValueFormatter: ValueFormatter;
+export declare const sumNumericArray: (arr: number[]) => number;
+export declare const removeValueFromArray: (value: any, array: any[]) => any[];
+export declare const isValueInArray: (value: any, array: any[]) => boolean;
+export declare const stringIsNumeric: (str: string | undefined) => boolean;
+export declare const stringEndsWithNumber: (str: string) => boolean;
+export declare function mergeRefs<T = any>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>): React.RefCallback<T>;

package/lib/lib/utils.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeRefs = exports.stringEndsWithNumber = exports.stringIsNumeric = exports.isValueInArray = exports.removeValueFromArray = exports.sumNumericArray = exports.defaultValueFormatter = void 0;
+const defaultValueFormatter = (value) => value.toString();
+exports.defaultValueFormatter = defaultValueFormatter;
+const sumNumericArray = (arr) => arr.reduce((prefixSum, num) => prefixSum + num, 0);
+exports.sumNumericArray = sumNumericArray;
+const removeValueFromArray = (value, array) => {
+    const index = array.indexOf(value);
+    if (index > -1) {
+        array.splice(index, 1);
+    }
+    return array;
+};
+exports.removeValueFromArray = removeValueFromArray;
+const isValueInArray = (value, array) => {
+    for (let i = 0; i < array.length; i++) {
+        if (array[i] === value) {
+            return true;
+        }
+    }
+    return false;
+};
+exports.isValueInArray = isValueInArray;
+const stringIsNumeric = (str) => {
+    return !isNaN(Number(str)) && str !== undefined;
+};
+exports.stringIsNumeric = stringIsNumeric;
+const stringEndsWithNumber = (str) => {
+    return (0, exports.stringIsNumeric)(str.split('-').pop());
+};
+exports.stringEndsWithNumber = stringEndsWithNumber;
+function mergeRefs(refs) {
+    return value => {
+        refs.forEach(ref => {
+            if (typeof ref === 'function') {
+                ref(value);
+            }
+            else if (ref != null) {
+                ref.current = value;
+            }
+        });
+    };
+}
+exports.mergeRefs = mergeRefs;
+//# sourceMappingURL=utils.js.map

package/lib/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/lib/utils.tsx"],"names":[],"mappings":";;;AAEO,MAAM,qBAAqB,GAAmB,CAAC,KAAa,EAAE,EAAE,CACrE,KAAK,CAAC,QAAQ,EAAE,CAAC;AADN,QAAA,qBAAqB,yBACf;AAEZ,MAAM,eAAe,GAAG,CAAC,GAAa,EAAE,EAAE,CAC/C,GAAG,CAAC,MAAM,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE,EAAE,CAAC,SAAS,GAAG,GAAG,EAAE,CAAC,CAAC,CAAC;AADxC,QAAA,eAAe,mBACyB;AAE9C,MAAM,oBAAoB,GAAG,CAAC,KAAU,EAAE,KAAY,EAAS,EAAE;IACtE,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IACnC,IAAI,KAAK,GAAG,CAAC,CAAC,EAAE;QACd,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;KACxB;IACD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AANW,QAAA,oBAAoB,wBAM/B;AAEK,MAAM,cAAc,GAAG,CAAC,KAAU,EAAE,KAAY,EAAW,EAAE;IAClE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACrC,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,KAAK,EAAE;YACtB,OAAO,IAAI,CAAC;SACb;KACF;IACD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAPW,QAAA,cAAc,kBAOzB;AAEK,MAAM,eAAe,GAAG,CAAC,GAAuB,EAAW,EAAE;IAClE,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,GAAG,KAAK,SAAS,CAAC;AAClD,CAAC,CAAC;AAFW,QAAA,eAAe,mBAE1B;AAEK,MAAM,oBAAoB,GAAG,CAAC,GAAW,EAAW,EAAE;IAC3D,OAAO,IAAA,uBAAe,EAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;AAC/C,CAAC,CAAC;AAFW,QAAA,oBAAoB,wBAE/B;AAEF,SAAgB,SAAS,CACvB,IAA2D;IAE3D,OAAO,KAAK,CAAC,EAAE;QACb,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACjB,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;gBAC7B,GAAG,CAAC,KAAK,CAAC,CAAC;aACZ;iBAAM,IAAI,GAAG,IAAI,IAAI,EAAE;gBACrB,GAAwC,CAAC,OAAO,GAAG,KAAK,CAAC;aAC3D;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC;AAZD,8BAYC"}

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@quillsql/react",
-  "version": "1.7.1",
+  "version": "1.7.3",
   "access": "public",
   "description": "Quill React components for building dashboards and reporting.",
   "main": "lib/index.js",
   "scripts": {
     "build": "tsc",
-    "build:foo": "rollup --config rollup.config.ts --configPlugin typescript",
     "watch": "tsc -w",
     "lint": "eslint 'src/**/*.{ts,tsx}'",
     "lint:fix": "eslint --fix 'src/**/*.{ts,tsx}'",
@@ -19,26 +18,19 @@
   "dependencies": {
     "@heroicons/react": "^2.0.18",
     "@monaco-editor/react": "^4.5.1",
-    "@size-limit/webpack": "^8.2.6",
-    "axios": "^1.3.5",
+    "axios": "^0.7.0",
     "date-fns": "^2.29.3",
     "date-fns-tz": "^2.0.0",
     "formik": "^2.4.2",
-    "react-loader-spinner": "^5.3.4",
-    "react-loading-skeleton": "^3.2.1",
     "recharts": "^2.5.0",
-    "size-limit": "^8.2.6",
     "tslib": "^2.5.0",
     "typescript": "^5.0.3"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^15.1.0",
-    "@rollup/plugin-typescript": "^11.1.2",
-    "@size-limit/preset-small-lib": "^8.2.6",
     "@types/react": "^18.0.33",
     "@types/react-dom": "^18.0.11",
     "@typescript-eslint/eslint-plugin": "^5.57.1",
@@ -49,6 +41,7 @@
     "eslint-plugin-react": "^7.32.2",
     "glob": "^10.2.2",
     "prettier": "^2.8.7",
-    "rollup": "^3.28.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   }
 }

package/src/AddToDashboardModal.tsx

@@ -97,14 +97,7 @@ export default function AddToDashboardModal({
   }, [schema]);
 
   const editChart = async ({ report, values, yAxisFields, columns, query }) => {
-    const {
-      publicKey,
-      orgId,
-      authToken,
-      queryEndpoint,
-      queryHeaders,
-      withCredentials,
-    } = client;
+    const { publicKey, orgId, authToken, queryEndpoint, queryHeaders } = client;
     const {
       xAxisLabel,
       yAxisLabel,
@@ -168,7 +161,7 @@ export default function AddToDashboardModal({
             task: 'create',
           },
         },
-        { headers: queryHeaders, withCredentials }
+        { headers: queryHeaders }
       );
     } else {
       response = await axios.post(

package/src/Chart.tsx

@@ -23,8 +23,6 @@ import {
   ThemeContext,
   DashboardFiltersContext,
 } from './Context';
-import Skeleton from 'react-loading-skeleton';
-import 'react-loading-skeleton/dist/skeleton.css';
 import TableChart from './TableChart';
 import { QuillTheme } from './QuillProvider';
 
@@ -550,7 +548,6 @@ const ChartUpdater: React.FC<ChartProps> = ({
           environment,
           queryEndpoint,
           queryHeaders,
-          withCredentials,
         } = client;
         //queryEndpoint = undefined;
         setLoading(true);
@@ -586,7 +583,7 @@ const ChartUpdater: React.FC<ChartProps> = ({
                   },
                 },
               },
-              { headers: queryHeaders, withCredentials }
+              { headers: queryHeaders }
             );
 
             if (resp.data) {
@@ -688,25 +685,57 @@ const ChartUpdater: React.FC<ChartProps> = ({
             height: containerStyle?.height || 300,
             width: '100%',
             boxSizing: 'content-box',
+            borderRadius: 8,
+            overflow: 'hidden',
           }}
         >
-          <Skeleton
-            count={1}
-            // height={containerStyle?.height}
-            height={
-              containerStyle?.height && containerStyle?.marginTop
-                ? containerStyle?.height + containerStyle?.marginTop
-                : containerStyle?.height
-                ? containerStyle?.height
-                : 300
-            }
-            borderRadius={8}
-            // highlightColor="#F7F7F8"
-            highlightColor="#FDFDFD"
-            // baseColor="#F3F4F6"
-            baseColor="#F9F9FA"
+          <svg
             width="100%"
-          />
+            height="100%"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+          >
+            <rect width="100%" height="100%" fill="#F9F9FA" />
+
+            <defs fill="#F9F9FA">
+              <linearGradient
+                id="skeletonGradient"
+                x1="0%"
+                y1="0%"
+                x2="10%"
+                y2="0%"
+                gradientUnits="userSpaceOnUse"
+              >
+                <stop offset="0%" stop-color="rgba(255,255,255,0)" />
+                <stop offset="50%" stop-color="#FEFEFE" />
+                <stop offset="100%" stop-color="rgba(255,255,255,0)" />
+                <animate
+                  attributeName="x1"
+                  from="-100%"
+                  to="100%"
+                  dur="2s"
+                  repeatCount="indefinite"
+                />
+                <animate
+                  attributeName="x2"
+                  from="-50%"
+                  to="150%"
+                  dur="2s"
+                  repeatCount="indefinite"
+                />
+              </linearGradient>
+            </defs>
+
+            <rect width="50%" height="100%" fill="url(#skeletonGradient)">
+              <animate
+                attributeName="x"
+                from="-100%"
+                to="100%"
+                dur="2s"
+                repeatCount="indefinite"
+              />
+            </rect>
+          </svg>
         </div>
       </div>
     );

package/src/Context.tsx

@@ -90,7 +90,6 @@ export const ContextProvider = ({
   userId,
   queryEndpoint,
   queryHeaders,
-  withCredentials,
 }) => {
   const [client, setClient] = useState(null);
   const [theme, setTheme] =
@@ -136,7 +135,6 @@ export const ContextProvider = ({
         environment,
         queryEndpoint,
         queryHeaders,
-        withCredentials,
       });
     }
   }, [
@@ -147,7 +145,6 @@ export const ContextProvider = ({
     client,
     environment,
     queryEndpoint,
-    withCredentials,
     queryHeaders,
   ]);
 

package/src/Dashboard.tsx

@@ -10,7 +10,7 @@ import {
 } from './Context';
 import { startOfToday, sub } from 'date-fns';
 import { DateRangePicker } from './DateRangePicker/index';
-import axios from 'axios';
+import axios from 'axios/index';
 import Modal from './components/Modal/Modal';
 import { HoveredValueContext, SelectedValueContext } from './contexts';
 import { DropdownItem } from './components/Dropdown';
@@ -59,7 +59,6 @@ export default function Dashboard({
         environment,
         queryEndpoint,
         queryHeaders,
-        withCredentials,
       } = client;
       try {
         // const response = await fetch(
@@ -68,6 +67,7 @@ export default function Dashboard({
 
         if (queryEndpoint) {
           //&& queryHeaders
+          // @ts-ignore
           const response = await axios.post(
             queryEndpoint,
             {
@@ -75,7 +75,6 @@ export default function Dashboard({
             },
             {
               headers: queryHeaders,
-              withCredentials,
             }
           );
 

package/src/PieChart.tsx

@@ -567,12 +567,12 @@ function rgbToHsl(rgb) {
   const max = Math.max(r, g, b);
   const min = Math.min(r, g, b);
 
-  const h = 0,
+  let h = 0,
     s = 0,
     l = (max + min) / 2;
 
   if (max !== min) {
-    const d = max - min;
+    let d = max - min;
     s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
 
     switch (max) {

package/src/QuillProvider.tsx

@@ -19,7 +19,6 @@ interface WithQueryEndpoint extends BaseQuillProviderProps {
   organizationId?: never;
   queryEndpoint: string;
   queryHeaders: object;
-  withCredentials?: boolean;
 }
 
 type QuillProviderProps = WithOrganizationId | WithQueryEndpoint;
@@ -61,7 +60,6 @@ const QuillProvider = ({
   environment,
   children,
   theme = defaultTheme,
-  withCredentials = false,
 }: QuillProviderProps) => {
   return (
     <ContextProvider
@@ -71,7 +69,6 @@ const QuillProvider = ({
       customerId={organizationId}
       queryEndpoint={queryEndpoint}
       queryHeaders={queryHeaders}
-      withCredentials={withCredentials}
     >
       {children}
     </ContextProvider>

package/src/ReportBuilder.tsx

@@ -161,21 +161,15 @@ export default function ReportBuilder({
   }, []);
 
   const runQuery = async query => {
-    const {
-      publicKey,
-      customerId,
-      environment,
-      queryEndpoint,
-      queryHeaders,
-      withCredentials,
-    } = client;
+    const { publicKey, customerId, environment, queryEndpoint, queryHeaders } =
+      client;
 
     let response;
     if (queryEndpoint) {
       response = await axios.post(
         queryEndpoint,
         { metadata: { query, task: 'query' } },
-        { headers: queryHeaders, withCredentials }
+        { headers: queryHeaders }
       );
     } else {
       response = await axios.post(

package/src/SQLEditor.tsx

@@ -13,7 +13,6 @@ import {
 } from '@heroicons/react/20/solid';
 import { QuillTheme } from './QuillProvider';
 import { SpecialTable } from './Table';
-import { TailSpin } from 'react-loader-spinner';
 
 export function convertPostgresColumn(column) {
   let format;
@@ -256,14 +255,8 @@ export default function QueryEditor({
   };
 
   const handleRunQuery = async () => {
-    const {
-      publicKey,
-      customerId,
-      environment,
-      queryEndpoint,
-      queryHeaders,
-      withCredentials,
-    } = client;
+    const { publicKey, customerId, environment, queryEndpoint, queryHeaders } =
+      client;
     try {
       let response;
       setSqlQueryLoading(true);
@@ -271,7 +264,7 @@ export default function QueryEditor({
         response = await axios.post(
           queryEndpoint,
           { metadata: { query, task: 'query' } },
-          { headers: queryHeaders, withCredentials }
+          { headers: queryHeaders }
         );
       } else {
         response = await axios.post(
@@ -679,7 +672,54 @@ const SQLEditorComponent = ({
         >
           {LoadingComponent && <LoadingComponent />}
           {!LoadingComponent && (
-            <TailSpin height={36} width={36} color="#364153" />
+            <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+              <defs>
+                <linearGradient
+                  id="circleGradient"
+                  gradientUnits="objectBoundingBox"
+                >
+                  <stop offset="0%" stop-color="#F9F9FA" />
+                  <stop offset="5%" stop-color="#F9F9FA" />
+                  <stop offset="100%" stop-color="#D1D1D1" />
+                </linearGradient>
+                <mask id="mask">
+                  <circle cx="12" cy="12" r="12" fill="white" />
+                  <path
+                    id="sector"
+                    fill="black"
+                    d="M15,15 L15,1.8 A13.2,13.2 0 0,1 15,1.8 Z"
+                  >
+                    <animate
+                      attributeName="d"
+                      from="M15,15 L15,1.8 A13.2,13.2 0 0,0 15,1.8 Z"
+                      to="M15,15 L15,1.8 A13.2,13.2 0 1,1 15,1.8 Z"
+                      dur="2s"
+                      repeatCount="indefinite"
+                    />
+                  </path>
+                </mask>
+              </defs>
+              <g transform="rotate(0 15 15)">
+                <animateTransform
+                  attributeName="transform"
+                  attributeType="XML"
+                  type="rotate"
+                  from="0 12 12"
+                  to="360 12 12"
+                  dur="2s"
+                  repeatCount="indefinite"
+                />
+                <circle
+                  cx="12"
+                  cy="12"
+                  r="12"
+                  fill="none"
+                  stroke="url(#circleGradient)"
+                  stroke-width="8"
+                  mask="url(#mask)"
+                />
+              </g>
+            </svg>
           )}
         </div>
       ) : (
@@ -824,7 +864,54 @@ const SchemaListComponent = ({ schema, theme, loading, LoadingComponent }) => {
         <div style={{ height: 100 }} />
         {LoadingComponent && <LoadingComponent />}
         {!LoadingComponent && (
-          <TailSpin height={36} width={36} color="#364153" />
+          <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+            <defs>
+              <linearGradient
+                id="circleGradient"
+                gradientUnits="objectBoundingBox"
+              >
+                <stop offset="0%" stop-color="#F9F9FA" />
+                <stop offset="5%" stop-color="#F9F9FA" />
+                <stop offset="100%" stop-color="#D1D1D1" />
+              </linearGradient>
+              <mask id="mask">
+                <circle cx="12" cy="12" r="12" fill="white" />
+                <path
+                  id="sector"
+                  fill="black"
+                  d="M15,15 L15,1.8 A13.2,13.2 0 0,1 15,1.8 Z"
+                >
+                  <animate
+                    attributeName="d"
+                    from="M15,15 L15,1.8 A13.2,13.2 0 0,0 15,1.8 Z"
+                    to="M15,15 L15,1.8 A13.2,13.2 0 1,1 15,1.8 Z"
+                    dur="2s"
+                    repeatCount="indefinite"
+                  />
+                </path>
+              </mask>
+            </defs>
+            <g transform="rotate(0 15 15)">
+              <animateTransform
+                attributeName="transform"
+                attributeType="XML"
+                type="rotate"
+                from="0 12 12"
+                to="360 12 12"
+                dur="2s"
+                repeatCount="indefinite"
+              />
+              <circle
+                cx="12"
+                cy="12"
+                r="12"
+                fill="none"
+                stroke="url(#circleGradient)"
+                stroke-width="8"
+                mask="url(#mask)"
+              />
+            </g>
+          </svg>
         )}
       </div>
     );

package/src/Table.tsx

@@ -2,12 +2,8 @@
 // @ts-nocheck
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import axios from 'axios';
-import {
-  ClientContext,
-  DashboardContext,
-  ThemeContext,
-} from './Context';
-import Skeleton from 'react-loading-skeleton';
+import { ClientContext, DashboardContext, ThemeContext } from './Context';
+// import Skeleton from 'react-loading-skeleton';
 import { valueFormatter } from './Chart';
 // import { SpecialTable } from './SQLEditor';
 import { QuillTheme } from './QuillProvider';
@@ -834,7 +830,54 @@ const ChartUpdater = ({
             boxSizing: 'content-box',
           }}
         >
-          <Skeleton
+          <svg
+            width="100%"
+            height="100%"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+          >
+            <rect width="100%" height="100%" fill="#F9F9FA" />
+
+            <defs fill="#F9F9FA">
+              <linearGradient
+                id="skeletonGradient"
+                x1="0%"
+                y1="0%"
+                x2="10%"
+                y2="0%"
+                gradientUnits="userSpaceOnUse"
+              >
+                <stop offset="0%" stop-color="rgba(255,255,255,0)" />
+                <stop offset="50%" stop-color="#FEFEFE" />
+                <stop offset="100%" stop-color="rgba(255,255,255,0)" />
+                <animate
+                  attributeName="x1"
+                  from="-100%"
+                  to="100%"
+                  dur="2s"
+                  repeatCount="indefinite"
+                />
+                <animate
+                  attributeName="x2"
+                  from="-50%"
+                  to="150%"
+                  dur="2s"
+                  repeatCount="indefinite"
+                />
+              </linearGradient>
+            </defs>
+
+            <rect width="50%" height="100%" fill="url(#skeletonGradient)">
+              <animate
+                attributeName="x"
+                from="-100%"
+                to="100%"
+                dur="2s"
+                repeatCount="indefinite"
+              />
+            </rect>
+          </svg>
+          {/* <Skeleton
             count={1}
             // height={containerStyle?.height}
             height={
@@ -850,7 +893,7 @@ const ChartUpdater = ({
             // baseColor="#F3F4F6"
             baseColor="#F9F9FA"
             width="100%"
-          />
+          /> */}
         </div>
       </div>
     );