fetch again if iModelGrid isn't full after fetch

iTwin · Jan 8, 2025 · 4515674 · 4515674
1 parent 9f67224
commit 4515674
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/packages/modules/imodel-browser/src/containers/iModelGrid/IModelGrid.tsx b/packages/modules/imodel-browser/src/containers/iModelGrid/IModelGrid.tsx
@@ -202,8 +202,11 @@ export const IModelGrid = ({
               />
             ))}
             {fetchMore ? (
-              <InView onChange={fetchMore}>
-                <IModelGhostTile />
+              <InView>
+                {({ inView, ref }) => {
+                  inView && fetchStatus !== DataStatus.Fetching && fetchMore();
+                  return <IModelGhostTile ref={ref} />;
+                }}
               </InView>
             ) : null}
             {fetchStatus === DataStatus.Fetching && (

diff --git a/packages/modules/imodel-browser/src/containers/iModelTiles/IModelGhostTile.tsx b/packages/modules/imodel-browser/src/containers/iModelTiles/IModelGhostTile.tsx
@@ -3,14 +3,14 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { ThemeProvider, Tile } from "@itwin/itwinui-react";
-import React from "react";
+import React, { forwardRef } from "react";
 
 /**
  * Representation of a Ghost IModel
  */
-export const IModelGhostTile = () => {
+export const IModelGhostTile = forwardRef<HTMLDivElement>((props, ref) => {
   return (
-    <ThemeProvider theme="inherit">
+    <ThemeProvider ref={ref} theme="inherit" {...props}>
       <Tile
         name={
           <span
@@ -35,4 +35,4 @@ export const IModelGhostTile = () => {
       />
     </ThemeProvider>
   );
-};
+});