feat(datagrid-web): replace isLoading with isFirstLoad and update related logic

Author: samuelreichert

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

@@ -141,6 +141,7 @@ export function preview(props: DatagridPreviewProps): ReactElement {
             cellEventsController={eventsController}
             checkboxEventsController={eventsController}
             focusController={focusController}
+            isFirstLoad={false}
             isLoading={false}
             isFetchingNextBatch={false}
             loadingType="spinner"

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

@@ -118,8 +118,9 @@ 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/components/GridBody.tsx

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

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

@@ -66,6 +66,7 @@ export interface WidgetProps<C extends GridColumn, T extends ObjectItem = Object
     cancelExportLabel?: string;
     selectRowLabel?: string;
     selectAllRowsLabel?: string;
+    isFirstLoad: boolean;
     isLoading: boolean;
     isFetchingNextBatch: boolean;
     loadingType: LoadingTypeEnum;
@@ -164,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>}
@@ -192,9 +195,9 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
                         isLoading={props.columnsLoading}
                         preview={props.preview}
                     />
-                    {refreshIndicator && props.isLoading ? <RefreshIndicator /> : null}
+                    {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,6 +105,7 @@ export function mockWidgetProps(): WidgetProps<GridColumn, ObjectItem> {
         selectActionHelper: mockSelectionProps(),
         cellEventsController: { getProps: () => Object.create({}) },
         checkboxEventsController: { getProps: () => Object.create({}) },
+        isFirstLoad: false,
         isLoading: false,
         isFetchingNextBatch: false,
         loadingType: "spinner",

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;
 }