From b3df609765ba1e506633b48570da2817188c8e9d Mon Sep 17 00:00:00 2001
From: Dominik Haentsch <dominik.haentsch@gmail.com>
Date: Fri, 8 Dec 2023 10:06:07 +0100
Subject: [PATCH] feat: add spinner to column badge while computing

---
 src/components/ui/ColumnBadge.tsx | 36 ++++++++++++++++++++++++-------
 src/components/ui/Spinner.tsx     |  2 +-
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/components/ui/ColumnBadge.tsx b/src/components/ui/ColumnBadge.tsx
index 387749fe..8a7b7da4 100644
--- a/src/components/ui/ColumnBadge.tsx
+++ b/src/components/ui/ColumnBadge.tsx
@@ -6,9 +6,11 @@ import { ColumnDragData } from '../../systems/dnd/types';
 import Draggable from '../../systems/dnd/Draggable';
 import { useDataset } from '../../stores/dataset';
 import { type CSSProp } from 'styled-components';
+import Spinner from './Spinner';
 
 interface InternalProps {
     column: DataColumn;
+    computing: boolean;
     className?: string;
     css?: CSSProp;
 }
@@ -20,13 +22,22 @@ interface Props {
     css?: CSSProp;
 }
 
-const StaticColumnBadge = ({ column, className }: InternalProps): JSX.Element => {
+const StaticColumnBadge = ({
+    column,
+    computing,
+    className,
+}: InternalProps): JSX.Element => {
     return (
         <div
             tw="flex flex-row truncate rounded border text-xs text-midnight-500 bg-gray-100 p-0.5 hover:border-gray-600 transition space-x-0.5"
             className={className}
         >
-            <DataTypeIcon type={column.type} />
+            <div tw="relative">
+                <DataTypeIcon type={column.type} />
+                {computing && (
+                    <Spinner tw="h-2 w-2 bottom-0 right-0 absolute bg-gray-100 border-gray-100 text-gray-600 border" />
+                )}
+            </div>
             {column.editable && <EditIcon />}
             <span>{column.name}</span>
         </div>
@@ -39,16 +50,25 @@ const ColumnBadge = ({
     draggable = true,
 }: Props): JSX.Element => {
     const column = useDataset((state) => state.columnsByKey[columnKey]);
+    const computing = useDataset(
+        (state) =>
+            state.columnsByKey[columnKey].computed &&
+            state.columnData[columnKey] === undefined
+    );
+
+    const badge = (
+        <StaticColumnBadge
+            column={column}
+            computing={computing}
+            className={className}
+        />
+    );
 
     if (draggable) {
         const dragData: ColumnDragData = { kind: 'column', column };
-        return (
-            <Draggable data={dragData}>
-                <StaticColumnBadge column={column} className={className} />
-            </Draggable>
-        );
+        return <Draggable data={dragData}>{badge}</Draggable>;
     } else {
-        return <StaticColumnBadge column={column} className={className} />;
+        return badge;
     }
 };
 
diff --git a/src/components/ui/Spinner.tsx b/src/components/ui/Spinner.tsx
index b805610b..f8ad7641 100644
--- a/src/components/ui/Spinner.tsx
+++ b/src/components/ui/Spinner.tsx
@@ -1,6 +1,6 @@
 import tw from 'twin.macro';
 
-const Svg = tw.svg`text-blue-400 w-full h-full animate-spin`;
+const Svg = tw.svg`text-blue-400 w-full h-full animate-spin rounded-full`;
 const Circle = tw.circle`opacity-50 stroke-current`;
 const Path = tw.path`text-blue-600 stroke-current`;