Expand table loader overlay and add bg animation

kbase · Apr 16, 2024 · d87ff17 · d87ff17
1 parent 9e0d0a8
commit d87ff17
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 10 deletions.
diff --git a/src/common/components/Table.module.scss b/src/common/components/Table.module.scss
@@ -57,14 +57,24 @@ $header-height: 2em;
   }
 }
 
+@keyframes table-loading {
+  from {background-color: use-color("base-light");}
+  to {background-color: use-color("base");}
+}
+
 .table-wrapper .loader {
   align-items: center;
-  background-color: use-rgba-color("grey", 0.8);
+  animation-direction: alternate;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-name: table-loading;
+  animation-timing-function: linear;
   bottom: 0;
   color: use-color("white");
-  display: flex;
   justify-content: center;
   left: 0;
+  opacity: 0.5;
+  padding: 1rem;
   pointer-events: none;
   position: absolute;
   right: 0;
@@ -75,6 +85,7 @@ $header-height: 2em;
   border-collapse: separate;
   border-spacing: 0;
   height: 100%;
+  position: relative;
   width: 100%;
 
   thead {

diff --git a/src/common/components/Table.tsx b/src/common/components/Table.tsx
@@ -114,15 +114,15 @@ export const Table = <Datum,>({
             {table.getRowModel().rows.length < 1 ? <tr /> : <></>}
           </tbody>
           {shouldRenderFooter ? <TableFooter table={table} /> : <></>}
+          <Loader
+            loading={isLoading}
+            render={
+              <div className={classes['loader']} data-testid="table-loader">
+                <FAIcon icon={faSpinner} spin size={'2x'} />
+              </div>
+            }
+          />
         </table>
-        <Loader
-          loading={isLoading}
-          render={
-            <div className={classes['loader']} data-testid="table-loader">
-              <FAIcon icon={faSpinner} spin size={'2x'} />
-            </div>
-          }
-        />
       </div>
     </div>
   );