[WC-2838]: Implement RefreshIndicator component on Datagrid 2 (#1765)

Author: samuelreichert

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

@@ -429,6 +429,86 @@ $root: ".widget-datagrid";
         display: contents;
     }
 
+    &-refresh-container {
+        grid-column: 1 / -1;
+        padding: 0;
+        position: relative;
+    }
+
+    &-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%;
+        position: absolute;
+        left: 0;
+        right: 0;
+
+        &::-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 3s 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/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+- We implemented a new property to show a refresh indicator. With the refresh indicator, any datasource change shows a progress bar on top of Datagrid 2.
+
 ## [3.2.0] - 2025-08-18
 
 ### Changed

packages/pluggableWidgets/datagrid-web/src/Datagrid.editorPreview.tsx

@@ -141,10 +141,12 @@ export function preview(props: DatagridPreviewProps): ReactElement {
             cellEventsController={eventsController}
             checkboxEventsController={eventsController}
             focusController={focusController}
+            isFirstLoad={false}
             isLoading={false}
             isFetchingNextBatch={false}
             loadingType="spinner"
             columnsLoading={false}
+            showRefreshIndicator={false}
         />
     );
 }

packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx

@@ -1,22 +1,22 @@
+import { useOnResetFiltersEvent } from "@mendix/widget-plugin-external-events/hooks";
+import { useClickActionHelper } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper";
+import { useFocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/useFocusTargetController";
 import { useSelectionHelper } from "@mendix/widget-plugin-grid/selection";
 import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
+import { observer } from "mobx-react-lite";
 import { ReactElement, ReactNode, createElement, useCallback, useMemo } from "react";
 import { DatagridContainerProps } from "../typings/DatagridProps";
 import { Cell } from "./components/Cell";
 import { Widget } from "./components/Widget";
 import { WidgetHeaderContext } from "./components/WidgetHeaderContext";
-import { useSelectActionHelper } from "./helpers/SelectActionHelper";
-import { useClickActionHelper } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper";
+import { ProgressStore } from "./features/data-export/ProgressStore";
+import { useDataExport } from "./features/data-export/useDataExport";
 import { useCellEventsController } from "./features/row-interaction/CellEventsController";
 import { useCheckboxEventsController } from "./features/row-interaction/CheckboxEventsController";
-import { useFocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/useFocusTargetController";
-import { useOnResetFiltersEvent } from "@mendix/widget-plugin-external-events/hooks";
+import { useSelectActionHelper } from "./helpers/SelectActionHelper";
 import { IColumnGroupStore } from "./helpers/state/ColumnGroupStore";
-import { observer } from "mobx-react-lite";
 import { RootGridStore } from "./helpers/state/RootGridStore";
 import { useRootStore } from "./helpers/state/useRootStore";
-import { useDataExport } from "./features/data-export/useDataExport";
-import { ProgressStore } from "./features/data-export/ProgressStore";
 
 interface Props extends DatagridContainerProps {
     columnsStore: IColumnGroupStore;
@@ -118,10 +118,12 @@ const Container = observer((props: Props): ReactElement => {
             cellEventsController={cellEventsController}
             checkboxEventsController={checkboxEventsController}
             focusController={focusController}
-            isLoading={rootStore.loaderCtrl.isLoading}
+            isFirstLoad={rootStore.loaderCtrl.isFirstLoad}
             isFetchingNextBatch={rootStore.loaderCtrl.isFetchingNextBatch}
+            isLoading={props.datasource.status === "loading"}
             loadingType={props.loadingType}
             columnsLoading={!columnsStore.loaded}
+            showRefreshIndicator={rootStore.loaderCtrl.showRefreshIndicator}
         />
     );
 });

packages/pluggableWidgets/datagrid-web/src/Datagrid.xml

@@ -57,6 +57,10 @@
                         <enumerationValue key="skeleton">Skeleton</enumerationValue>
                     </enumerationValues>
                 </property>
+                <property key="refreshIndicator" type="boolean" defaultValue="false">
+                    <caption>Show refresh indicator</caption>
+                    <description>Show a refresh indicator when the data is being loaded.</description>
+                </property>
             </propertyGroup>
             <propertyGroup caption="Columns">
                 <property key="columns" type="object" isList="true">

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

@@ -8,7 +8,7 @@ interface Props {
     className?: string;
     children?: React.ReactNode;
     loadingType: LoadingTypeEnum;
-    isLoading: boolean;
+    isFirstLoad: boolean;
     isFetchingNextBatch?: boolean;
     columnsHidable: boolean;
     columnsSize: number;
@@ -20,7 +20,7 @@ export function GridBody(props: Props): ReactElement {
     const { children } = props;
 
     const content = (): React.ReactElement => {
-        if (props.isLoading) {
+        if (props.isFirstLoad) {
             return <Loader {...props} rowsSize={props.rowsSize > 0 ? props.rowsSize : props.pageSize} />;
         }
         return (

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>;
@@ -65,10 +66,12 @@ export interface WidgetProps<C extends GridColumn, T extends ObjectItem = Object
     cancelExportLabel?: string;
     selectRowLabel?: string;
     selectAllRowsLabel?: string;
+    isFirstLoad: boolean;
     isLoading: boolean;
     isFetchingNextBatch: boolean;
     loadingType: LoadingTypeEnum;
     columnsLoading: boolean;
+    showRefreshIndicator: boolean;
 
     // Helpers
     cellEventsController: EventsController;
@@ -131,6 +134,7 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
         paging,
         pagingPosition,
         preview,
+        showRefreshIndicator,
         selectActionHelper,
         setPage,
         visibleColumns
@@ -189,8 +193,9 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
                         isLoading={props.columnsLoading}
                         preview={props.preview}
                     />
+                    {showRefreshIndicator ? <RefreshIndicator /> : null}
                     <GridBody
-                        isLoading={props.isLoading}
+                        isFirstLoad={props.isFirstLoad}
                         isFetchingNextBatch={props.isFetchingNextBatch}
                         loadingType={props.loadingType}
                         columnsHidable={columnsHidable}

packages/pluggableWidgets/datagrid-web/src/controllers/DerivedLoaderController.ts

@@ -1,21 +1,28 @@
 import { computed, makeObservable } from "mobx";
 
 type DerivedLoaderControllerSpec = {
+    showSilentRefresh: boolean;
+    refreshIndicator: boolean;
     exp: { exporting: boolean };
     cols: { loaded: boolean };
-    query: { isFetchingNextBatch: boolean; isLoading: boolean; isRefreshing: boolean };
+    query: {
+        isFetchingNextBatch: boolean;
+        isFirstLoad: boolean;
+        isRefreshing: boolean;
+        isSilentRefresh: boolean;
+    };
 };
 
 export class DerivedLoaderController {
     constructor(private spec: DerivedLoaderControllerSpec) {
         makeObservable(this, {
-            isLoading: computed,
+            isFirstLoad: computed,
             isFetchingNextBatch: computed,
             isRefreshing: computed
         });
     }
 
-    get isLoading(): boolean {
+    get isFirstLoad(): boolean {
         const { cols, exp, query } = this.spec;
         if (!cols.loaded) {
             return true;
@@ -25,14 +32,28 @@ export class DerivedLoaderController {
             return false;
         }
 
-        return query.isLoading;
+        return query.isFirstLoad;
     }
 
     get isFetchingNextBatch(): boolean {
         return this.spec.query.isFetchingNextBatch;
     }
 
     get isRefreshing(): boolean {
-        return this.spec.query.isRefreshing;
+        const { isSilentRefresh, isRefreshing } = this.spec.query;
+
+        if (this.spec.showSilentRefresh) {
+            return isSilentRefresh || isRefreshing;
+        }
+
+        return !isSilentRefresh && isRefreshing;
+    }
+
+    get showRefreshIndicator(): boolean {
+        if (!this.spec.refreshIndicator) {
+            return false;
+        }
+
+        return this.isRefreshing;
     }
 }

packages/pluggableWidgets/datagrid-web/src/helpers/state/RootGridStore.ts

@@ -82,6 +82,8 @@ export class RootGridStore extends BaseControllerHost {
         this.loaderCtrl = new DerivedLoaderController({
             exp: exportCtrl,
             cols: this.columnsStore,
+            showSilentRefresh: props.refreshInterval > 1,
+            refreshIndicator: props.refreshIndicator,
             query
         });