Virtualized Property Grid: display loader on all loads

common/changes/@itwin/components-react/property-grid-change-loader-logic_2024-01-02-19-10.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/components-react",
+      "comment": "Show loading spinner in subsequent loads if delay threshold is reached VirtualizedPropertyGrid",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@itwin/components-react"
+}

docs/changehistory/NextVersion.md

@@ -1 +1,12 @@
 # NextVersion <!-- omit from toc -->
+
+Table of contents:
+
+- [@itwin/components-react](#itwincomponents-react)
+  - [Improvements](#improvements)
+
+## @itwin/components-react
+
+### Improvements
+
+- Show loading spinner in subsequent loads if delay threshold is reached `VirtualizedPropertyGrid.`

ui/components-react/src/components-react/propertygrid/component/VirtualizedPropertyGridWithDataProvider.tsx

@@ -7,12 +7,12 @@
  * @module PropertyGrid
  */
 
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { DelayedSpinner } from "../../common/DelayedSpinner";
 import {
   usePropertyGridEventHandler,
   usePropertyGridModel,
-  usePropertyGridModelSource,
+  useTrackedPropertyGridModelSource,
 } from "../internal/PropertyGridHooks";
 import type { PropertyCategoryRendererManager } from "../PropertyCategoryRendererManager";
 import type { IPropertyDataProvider } from "../PropertyDataProvider";
@@ -47,25 +47,41 @@ export interface VirtualizedPropertyGridWithDataProviderProps
 export function VirtualizedPropertyGridWithDataProvider(
   props: VirtualizedPropertyGridWithDataProviderProps
 ) {
-  const modelSource = usePropertyGridModelSource({
+  const [showSpinner, setShowSpinner] = useState(false);
+
+  const { modelSource, inProgress } = useTrackedPropertyGridModelSource({
     dataProvider: props.dataProvider,
   });
+
   const model = usePropertyGridModel({ modelSource });
   const eventHandler = usePropertyGridEventHandler({ modelSource });
+  useEffect(() => {
+    if (!inProgress) {
+      setShowSpinner(inProgress);
+      return;
+    }
+
+    // only set a timeout when inProgress is set to `true`
+    const timeout = setTimeout(() => {
+      setShowSpinner(inProgress);
+    }, 250);
 
-  if (!model) {
-    return (
-      <div className="components-virtualized-property-grid-loader">
-        <DelayedSpinner size="large" />
-      </div>
-    );
-  }
+    return () => clearTimeout(timeout);
+  }, [inProgress, model]);
 
   return (
-    <VirtualizedPropertyGrid
-      {...props}
-      model={model}
-      eventHandler={eventHandler}
-    />
+    <>
+      {showSpinner || !model ? (
+        <div className="components-virtualized-property-grid-loader">
+          <DelayedSpinner size="large" />
+        </div>
+      ) : (
+        <VirtualizedPropertyGrid
+          {...props}
+          model={model}
+          eventHandler={eventHandler}
+        />
+      )}
+    </>
   );
 }

ui/components-react/src/components-react/propertygrid/internal/PropertyGridHooks.ts

@@ -46,6 +46,7 @@ export function usePropertyData(props: {
  * Custom hook that creates a [[PropertyGridModelSource]] and subscribes it to data updates from the data provider.
  * @throws if/when `IPropertyDataProvider.getData()` promise is rejected. The error is thrown in the React's render loop, so it can be caught using an error boundary.
  * @public
+ * @deprecated in 4.9.0. Use useTrackedPropertyGridModelSource instead.
  */
 export function usePropertyGridModelSource(props: {
   dataProvider: IPropertyDataProvider;
@@ -67,6 +68,31 @@ export function usePropertyGridModelSource(props: {
   return modelSource;
 }
 
+/**
+ * Custom hook that creates a [[PropertyGridModelSource]] and subscribes it to data updates from the data provider while also providing information on data update progress.
+ * @throws if/when `IPropertyDataProvider.getData()` promise is rejected. The error is thrown in the React's render loop, so it can be caught using an error boundary.
+ * @public
+ */
+export function useTrackedPropertyGridModelSource(props: {
+  dataProvider: IPropertyDataProvider;
+}) {
+  const { value: propertyData, inProgress } = usePropertyData(props);
+  const { dataProvider } = { ...props };
+
+  // Model source needs to be recreated if data provider changes
+  const modelSource = useMemo(
+    () => new PropertyGridModelSource(new MutableGridItemFactory()),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [dataProvider]
+  );
+
+  useEffect(() => {
+    if (propertyData) modelSource.setPropertyData(propertyData);
+  }, [modelSource, propertyData]);
+
+  return { modelSource, inProgress };
+}
+
 /**
  * Custom hook that creates memoized version of [[PropertyGridEventHandler]] that modifies given modelSource
  * @public

ui/components-react/src/test/propertygrid/component/VirtualizedPropertyGridWithDataProvider.test.tsx

@@ -131,6 +131,37 @@ describe("VirtualizedPropertyGridWithDataProvider", () => {
         .to.be.not.null;
     });
 
+    it("renders loader on subsequent selections that take longer to load", async () => {
+      const { container, findByText } = render(
+        <VirtualizedPropertyGridWithDataProvider {...defaultProps} />
+      );
+
+      // assert that initial property grid is loaded
+      await waitFor(async () => findByText("Group 1"));
+      await waitFor(
+        async () =>
+          expect(container.querySelector(".virtualized-grid-node")).to.be.not
+            .null
+      );
+
+      // stub getData with a method that can be manually resolved
+      const getDataResult = new ResolvablePromise<PropertyData>();
+      dataProvider.getData = async () => getDataResult;
+
+      dataProvider.onDataChanged.raiseEvent();
+
+      // do not resolve the getData promise until the loader is displayed
+      await waitFor(
+        async () =>
+          expect(
+            container.querySelector(
+              ".components-virtualized-property-grid-loader"
+            )
+          ).to.be.not.null,
+        { timeout: 500 }
+      );
+    });
+
     it("renders PropertyCategoryBlocks correctly", async () => {
       const { container } = render(
         <VirtualizedPropertyGridWithDataProvider {...defaultProps} />