feat(datagrid-web): add RefreshIndicator component and styles for loading state

Author: samuelreichert

packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss

@@ -429,6 +429,82 @@ $root: ".widget-datagrid";
         display: contents;
     }
 
+    &-refresh-container {
+        grid-column: 1 / -1;
+        padding: 0;
+    }
+
+    &-refresh-indicator {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        background-color: var(--border-color-default, #ced0d3);
+        border: none;
+        border-radius: 2px;
+        color: var(--brand-primary, $dg-brand-primary);
+        height: 4px;
+        width: 100%;
+
+        &::-webkit-progress-bar {
+            background-color: transparent;
+        }
+
+        &::-webkit-progress-value {
+            background-color: currentColor;
+            transition: all 0.2s;
+        }
+
+        &::-moz-progress-bar {
+            background-color: currentColor;
+            transition: all 0.2s;
+        }
+
+        &::-ms-fill {
+            border: none;
+            background-color: currentColor;
+            transition: all 0.2s;
+        }
+
+        &:indeterminate {
+            background-size: 200% 100%;
+            background-image: linear-gradient(
+                to right,
+                transparent 50%,
+                currentColor 50%,
+                currentColor 60%,
+                transparent 60%,
+                transparent 71.5%,
+                currentColor 71.5%,
+                currentColor 84%,
+                transparent 84%
+            );
+            animation: progress-linear 2s infinite linear;
+        }
+
+        &:indeterminate::-moz-progress-bar {
+            background-color: transparent;
+        }
+
+        &:indeterminate::-ms-fill {
+            animation-name: none;
+        }
+
+        @keyframes progress-linear {
+            0% {
+                background-size: 200% 100%;
+                background-position: left -31.25% top 0%;
+            }
+            50% {
+                background-size: 800% 100%;
+                background-position: left -49% top 0%;
+            }
+            100% {
+                background-size: 400% 100%;
+                background-position: left -102% top 0%;
+            }
+        }
+    }
+
     &.widget-datagrid-selection-method-click {
         .tr.tr-selected .td {
             background-color: $dg-grid-selected-row-background;

packages/pluggableWidgets/datagrid-web/src/components/RefreshIndicator.tsx

@@ -0,0 +1,11 @@
+import { createElement, ReactElement } from "react";
+
+export function RefreshIndicator(): ReactElement {
+    return (
+        <div className="tr" role="row">
+            <div className="th widget-datagrid-refresh-container">
+                <progress className="widget-datagrid-refresh-indicator" />
+            </div>
+        </div>
+    );
+}

packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx

@@ -25,6 +25,7 @@ import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navig
 import { observer } from "mobx-react-lite";
 import { RowsRenderer } from "./RowsRenderer";
 import { GridHeader } from "./GridHeader";
+import { RefreshIndicator } from "./RefreshIndicator";
 
 export interface WidgetProps<C extends GridColumn, T extends ObjectItem = ObjectItem> {
     CellComponent: CellComponent<C>;
@@ -189,6 +190,7 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
                         isLoading={props.columnsLoading}
                         preview={props.preview}
                     />
+                    <RefreshIndicator />
                     <GridBody
                         isLoading={props.isLoading}
                         isFetchingNextBatch={props.isFetchingNextBatch}