[WC-2838]: Implement RefreshIndicator component on Datagrid 2

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 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/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.
+
 ## [2.30.6] - 2025-05-28
 
 ### Fixed

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}
+            refreshIndicator={props.refreshIndicator}
         />
     );
 }

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

@@ -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}
+            refreshIndicator={props.refreshIndicator}
         />
     );
 });

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;
+    refreshIndicator: boolean;
 
     // Helpers
     cellEventsController: EventsController;
@@ -131,6 +134,7 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
         paging,
         pagingPosition,
         preview,
+        refreshIndicator,
         selectActionHelper,
         setPage,
         visibleColumns
@@ -161,6 +165,8 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
 
     const selectionEnabled = selectActionHelper.selectionType !== "None";
 
+    const showRefreshIndicator = refreshIndicator && props.isLoading && !props.isFirstLoad;
+
     return (
         <Fragment>
             {showTopBar && <WidgetTopBar>{pagination}</WidgetTopBar>}
@@ -189,8 +195,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

@@ -3,19 +3,19 @@ import { computed, makeObservable } from "mobx";
 type DerivedLoaderControllerSpec = {
     exp: { exporting: boolean };
     cols: { loaded: boolean };
-    query: { isFetchingNextBatch: boolean; isLoading: boolean; isRefreshing: boolean };
+    query: { isFetchingNextBatch: boolean; isFirstLoad: boolean; isRefreshing: 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,7 +25,7 @@ export class DerivedLoaderController {
             return false;
         }
 
-        return query.isLoading;
+        return query.isFirstLoad;
     }
 
     get isFetchingNextBatch(): boolean {

packages/pluggableWidgets/datagrid-web/src/utils/test-utils.tsx

@@ -105,10 +105,12 @@ export function mockWidgetProps(): WidgetProps<GridColumn, ObjectItem> {
         selectActionHelper: mockSelectionProps(),
         cellEventsController: { getProps: () => Object.create({}) },
         checkboxEventsController: { getProps: () => Object.create({}) },
+        isFirstLoad: false,
         isLoading: false,
         isFetchingNextBatch: false,
         loadingType: "spinner",
         columnsLoading: false,
+        refreshIndicator: false,
         focusController: new FocusTargetController(
             new PositionController(),
             new VirtualGridLayout(1, columns.length, 10)

packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts

@@ -96,6 +96,7 @@ export interface DatagridContainerProps {
     itemSelectionMode: ItemSelectionModeEnum;
     showSelectAllToggle: boolean;
     loadingType: LoadingTypeEnum;
+    refreshIndicator: boolean;
     columns: ColumnsType[];
     columnsFilterable: boolean;
     pageSize: number;
@@ -144,6 +145,7 @@ export interface DatagridPreviewProps {
     itemSelectionMode: ItemSelectionModeEnum;
     showSelectAllToggle: boolean;
     loadingType: LoadingTypeEnum;
+    refreshIndicator: boolean;
     columns: ColumnsPreviewType[];
     columnsFilterable: boolean;
     pageSize: number | null;

packages/shared/widget-plugin-grid/src/__tests__/DatasourceController.spec.ts

@@ -21,8 +21,8 @@ describe("DatasourceController loading states", () => {
             provider.setProps({ datasource });
         });
 
-        it("isLoading returns true by default", () => {
-            expect(controller.isLoading).toBe(true);
+        it("isFirstLoad returns true by default", () => {
+            expect(controller.isFirstLoad).toBe(true);
         });
 
         it("refresh has no effect if ds is loading", () => {
@@ -39,13 +39,13 @@ describe("DatasourceController loading states", () => {
             provider.setProps({ datasource: list.loading() });
             expect(provider.gate.props.datasource.status).toBe("loading");
             expect(controller.isRefreshing).toBe(true);
-            expect(controller.isLoading).toBe(false);
+            expect(controller.isFirstLoad).toBe(true);
         });
 
         it("isFetchingNextBatch returns true after setLimit call", () => {
             controller.setLimit(20);
             expect(controller.isFetchingNextBatch).toBe(true);
-            expect(controller.isLoading).toBe(false);
+            expect(controller.isFirstLoad).toBe(true);
         });
     });
 
@@ -56,7 +56,7 @@ describe("DatasourceController loading states", () => {
         });
 
         it("all loading states return false", () => {
-            expect(controller.isLoading).toBe(false);
+            expect(controller.isFirstLoad).toBe(true);
             expect(controller.isRefreshing).toBe(false);
             expect(controller.isFetchingNextBatch).toBe(false);
         });

packages/shared/widget-plugin-grid/src/query/DatasourceController.ts

@@ -1,7 +1,7 @@
 import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/props-gate";
 import { ReactiveController, ReactiveControllerHost } from "@mendix/widget-plugin-mobx-kit/reactive-controller";
 import { ListValue, ValueStatus } from "mendix";
-import { action, autorun, computed, IComputedValue, makeAutoObservable } from "mobx";
+import { action, autorun, computed, IComputedValue, makeAutoObservable, when } from "mobx";
 import { QueryController } from "./query-controller";
 
 type Gate = DerivedPropsGate<{ datasource: ListValue }>;
@@ -13,19 +13,27 @@ export class DatasourceController implements ReactiveController, QueryController
     private refreshing = false;
     private fetching = false;
     private pageSize = Infinity;
+    private isLoaded = false;
 
     constructor(host: ReactiveControllerHost, spec: DatasourceControllerSpec) {
         host.addController(this);
         this.gate = spec.gate;
 
-        type PrivateMembers = "resetFlags" | "updateFlags" | "setRefreshing" | "setFetching" | "pageSize";
+        type PrivateMembers =
+            | "resetFlags"
+            | "updateFlags"
+            | "setRefreshing"
+            | "setFetching"
+            | "pageSize"
+            | "setIsLoaded";
         makeAutoObservable<this, PrivateMembers>(this, {
             setup: false,
             pageSize: false,
             updateFlags: action,
             resetFlags: action,
             setRefreshing: action,
-            setFetching: action
+            setFetching: action,
+            setIsLoaded: action
         });
     }
 
@@ -51,6 +59,10 @@ export class DatasourceController implements ReactiveController, QueryController
         this.fetching = value;
     }
 
+    private setIsLoaded(value: boolean): void {
+        this.isLoaded = value;
+    }
+
     private resetLimit(): void {
         this.datasource.setLimit(this.pageSize);
     }
@@ -63,11 +75,8 @@ export class DatasourceController implements ReactiveController, QueryController
         return this.gate.props.datasource;
     }
 
-    get isLoading(): boolean {
-        if (this.isRefreshing || this.isFetchingNextBatch) {
-            return false;
-        }
-        return this.isDSLoading;
+    get isFirstLoad(): boolean {
+        return !this.isLoaded;
     }
 
     get isRefreshing(): boolean {
@@ -105,6 +114,11 @@ export class DatasourceController implements ReactiveController, QueryController
     }
 
     setup(): () => void {
+        when(
+            () => !this.isDSLoading,
+            () => this.setIsLoaded(true)
+        );
+
         return autorun(() => {
             // Always use actions to set flags to avoid subscribing to them
             this.updateFlags(this.datasource.status);

packages/shared/widget-plugin-grid/src/query/query-controller.ts

@@ -15,7 +15,7 @@ export interface QueryController extends Pick<ListValue, Members> {
     refresh(): void;
     setPageSize(size: number): void;
     hasMoreItems: boolean;
-    isLoading: boolean;
+    isFirstLoad: boolean;
     isRefreshing: boolean;
     isFetchingNextBatch: boolean;
 }