Unprototyping Cognition

components/NoTableEntriesYet.tsx

@@ -1,15 +1,20 @@
 import { memo } from "react";
 import { useDefaults } from "../hooks/useDefaults";
 import { NO_TABLE_ENTRIES_YET_DEFAULTS, NoTableEntriesYetProps } from "../types/noTableEntriesYet";
-
+import { Loading } from '@nextui-org/react';
 
 function GetNoTableEntriesYet(_props: NoTableEntriesYetProps) {
     const [props] = useDefaults<NoTableEntriesYetProps>(_props, NO_TABLE_ENTRIES_YET_DEFAULTS);
 
     return <tr>
         <td colSpan={props.tableColumns}>
             <div className={`flex justify-center items-center w-full text-sm ${props.heightClass + " " + props.backgroundColorClass + " " + props.textColorClass + " " + props.marginBottomClass}`}>
-                {props.text}
+                {props.loading?
+                <div className={`flex ${props.loadingColorClass}`}>
+                    <Loading size="md" type="spinner" color="currentColor"/>
+                </div>
+                :
+                props.text}
             </div>
         </td>
     </tr>

types/noTableEntriesYet.ts

@@ -16,6 +16,8 @@ export type NoTableEntriesYetProps = {
     backgroundColorClass?: string;
     textColorClass?: string;
     marginBottomClass?: string; // can be used to offset common table paddings, usually negative
+    loading?: boolean
+    loadingColorClass?: string
 }
 
 
@@ -25,4 +27,6 @@ export const NO_TABLE_ENTRIES_YET_DEFAULTS = {
     backgroundColorClass: 'bg-gray-50',
     textColorClass: 'text-gray-700',
     marginBottomClass: "",
+    loading: false,
+    loadingColorClass: ''
 }