intermediate loader

web/package-lock.json

@@ -41,6 +41,7 @@
         "chartjs-plugin-trendline": "^2.1.6",
         "chartjs-plugin-zoom": "^2.2.0",
         "chartjs-react": "^4.3.0",
+        "clsx": "^2.1.1",
         "cookies-next": "^4.2.1",
         "dayjs": "^1.11.13",
         "dom-to-image": "^2.6.0",
@@ -6838,6 +6839,15 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -15918,14 +15928,6 @@
         "react-dom": "^18.0 || ^19.0"
       }
     },
-    "node_modules/react-data-grid/node_modules/clsx": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
-      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",

web/package.json

@@ -48,6 +48,7 @@
     "chartjs-plugin-trendline": "^2.1.6",
     "chartjs-plugin-zoom": "^2.2.0",
     "chartjs-react": "^4.3.0",
+    "clsx": "^2.1.1",
     "cookies-next": "^4.2.1",
     "dayjs": "^1.11.13",
     "dom-to-image": "^2.6.0",

web/src/app/test/tailwind/page.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
+import { IndeterminateLinearLoader } from '@/components/ui/loaders/IndeterminateLinearLoader';
 
 export default function TestPage() {
   return (
-    <div className="flex flex-col gap-4 bg-red-500">
+    <div className="flex flex-col gap-4">
       <div className="flex flex-col space-y-5">
         <div>Test</div>
         <div>TESTING!</div>
@@ -17,6 +18,12 @@ export default function TestPage() {
         <a>This is a not link</a>
         <a href="https://www.google.com">This is a link</a>
       </div>
+      <div className="!mt-5 flex flex-col gap-4">
+        <IndeterminateLinearLoader />
+        <IndeterminateLinearLoader />
+        <IndeterminateLinearLoader />
+        <IndeterminateLinearLoader />
+      </div>
     </div>
   );
 }

web/src/components/ui/grid/BusterResizeRows.tsx

@@ -3,7 +3,7 @@
 import React, { useMemo, useRef, useState } from 'react';
 import { BusterResizeableGridRow } from './interfaces';
 import { BusterResizeColumns } from './BusterResizeColumns';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { BusterNewItemDropzone } from './_BusterBusterNewItemDropzone';
 import { MIN_ROW_HEIGHT, TOP_SASH_ID, NEW_ROW_ID, MAX_ROW_HEIGHT } from './config';
 import { createStyles } from 'antd-style';
@@ -57,10 +57,10 @@ export const BusterResizeRows: React.FC<{
   return (
     <div
       ref={ref}
-      className={classNames(
+      className={clsx(
+        className,
         'buster-resize-row relative',
         'mb-10 flex h-full w-full flex-col space-y-3 transition',
-        className,
         'opacity-100'
       )}>
       <ResizeRowHandle
@@ -223,7 +223,7 @@ const ResizeRowHandle: React.FC<{
           id={id}
           className={cx(
             showDropzone && allowEdit && dropzoneStyles.dropzone,
-            'h-[4px] w-2 w-full select-none rounded-sm',
+            'h-[4px] w-full rounded-sm select-none',
             allowEdit && styles.dragger,
             !top && 'dragger absolute',
             showActive && 'active'

web/src/components/ui/grid/BusterResizeableGrid.tsx

@@ -18,7 +18,7 @@ import {
 import { arrayMove } from '@dnd-kit/sortable';
 import { BusterSortableOverlay } from './_BusterSortableOverlay';
 import { BusterResizeableGridRow } from './interfaces';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { v4 as uuidv4 } from 'uuid';
 import { useMemoizedFn } from 'ahooks';
 import isEqual from 'lodash/isEqual';
@@ -331,7 +331,7 @@ export const BusterResizeableGrid: React.FC<{
       onDragCancel={onDragCancel}
       collisionDetection={collisionDetectionStrategy}
       sensors={sensors}>
-      <div className={classNames('h-full w-full', 'buster-resizeable-grid', className)}>
+      <div className={clsx('h-full w-full', 'buster-resizeable-grid', className)}>
         <BusterResizeRows
           rows={rows}
           className={className}

web/src/components/ui/grid/_BusterSortableOverlay.tsx

@@ -1,10 +1,8 @@
 import { DragOverlay, defaultDropAnimationSideEffects } from '@dnd-kit/core';
 import type { DropAnimation, Modifier } from '@dnd-kit/core';
-import { createStyles } from 'antd-style';
 import { BusterSortableItemContent } from './_BusterSortableItemContent';
 import { animate } from 'framer-motion';
-import React, { PropsWithChildren, useEffect, useMemo } from 'react';
-import classNames from 'classnames';
+import React, { useEffect, useMemo } from 'react';
 import { BusterResizeableGridRow } from './interfaces';
 import { snapCenterToCursor } from '@dnd-kit/modifiers';
 import { NUMBER_OF_COLUMNS } from './config';

web/src/components/ui/loaders/IndeterminateLinearLoader.tsx

@@ -1,5 +1,5 @@
-import { createStyles } from 'antd-style';
 import React from 'react';
+import { twMerge } from 'tailwind-merge';
 
 export const IndeterminateLinearLoader: React.FC<{
   className?: string;
@@ -8,27 +8,21 @@ export const IndeterminateLinearLoader: React.FC<{
   trackColor?: string;
   valueColor?: string;
 }> = React.memo(({ className = '', trackColor, valueColor, style, height = 2 }) => {
-  const { styles, cx } = useStyles();
+  // const { styles, cx } = useStyles();
 
   return (
     <div
-      className={`indeterminate-progress-bar ${className}`}
+      className={`h-1.5 w-full overflow-hidden bg-gray-200 ${className}`}
       style={{ ...style, height, backgroundColor: trackColor }}>
       <div
-        className={cx(styles.track, 'indeterminate-progress-bar-value')}
-        style={{
-          backgroundColor: valueColor
-        }}
+        className={twMerge(
+          'bg-primary',
+          'animate-indeterminate-progress-bar h-full w-full origin-left'
+        )}
+        style={{ backgroundColor: valueColor }}
       />
     </div>
   );
 });
 
 IndeterminateLinearLoader.displayName = 'IndeterminateLinearLoader';
-
-const useStyles = createStyles(({ css, token }) => ({
-  track: css`
-    background: ${token.colorPrimary};
-    opacity: 0.6;
-  `
-}));

web/src/styles/fontsConfig.ts

@@ -1 +0,0 @@
-export const BUSTER_APP_FONT_FAMILY = 'Roobert_Pro';

web/src/styles/loaders.scss

@@ -1,26 +0,0 @@
-.indeterminate-progress-bar {
-  height: 4px;
-  //background-color: rgba(202, 202, 202, 0.2);
-  width: 100%;
-  overflow: hidden;
-}
-
-.indeterminate-progress-bar-value {
-  width: 100%;
-  height: 100%;
-  background-color: rgb(112, 112, 112);
-  animation: indeterminateAnimation 1s infinite linear;
-  transform-origin: 0% 50%;
-}
-
-@keyframes indeterminateAnimation {
-  0% {
-    transform: translateX(0) scaleX(0);
-  }
-  40% {
-    transform: translateX(0) scaleX(0.4);
-  }
-  100% {
-    transform: translateX(100%) scaleX(0.5);
-  }
-}

web/src/styles/styles.scss

@@ -2,7 +2,6 @@
 @import './tailwind';
 @import './antd';
 @import './sql';
-@import './loaders';
 @import './monaco';
 @import '../components/ui/layout/AppSplitter/SplitPane/themes/default';
 @import 'react-data-grid/lib/styles.css';

web/src/styles/tailwind.css

@@ -32,6 +32,8 @@
   --color-primary-dark: #6d28d9;
 }
 
+@import './tailwindAnimations.css';
+
 body {
   background: 'blue' !important;
 }

web/src/styles/tailwindAnimations.css

@@ -0,0 +1,15 @@
+@theme {
+  /* animations */
+  --animate-indeterminate-progress-bar: indeterminate-progress-bar 1s infinite linear;
+  @keyframes indeterminate-progress-bar {
+    0% {
+      transform: translateX(0) scaleX(0);
+    }
+    40% {
+      transform: translateX(0) scaleX(0.4);
+    }
+    100% {
+      transform: translateX(100%) scaleX(0.5);
+    }
+  }
+}