added last item seen in virtualized list

2025-06-14 17:41:20 +00:00 · 2025-03-12 09:26:43 +02:00 · 2025-03-12 09:26:43 +02:00 · 87a4f891a0
commit 87a4f891a0
parent 8539b54257
4 changed files with 161 additions and 59 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -15,6 +15,7 @@
        "@mui/material": "^6.4.7",
        "@tanstack/react-virtual": "^3.13.2",
        "react": "^19.0.0",
+        "react-intersection-observer": "^9.16.0",
        "zustand": "^4.3.2"
      },
      "devDependencies": {
@ -2121,6 +2122,20 @@
        "react": "^19.0.0"
      }
    },
+    "node_modules/react-intersection-observer": {
+      "version": "9.16.0",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.16.0.tgz",
+      "integrity": "sha512-w9nJSEp+DrW9KmQmeWHQyfaP6b03v+TdXynaoA964Wxt7mdR3An11z4NNCQgL4gKSK7y1ver2Fq+JKH6CWEzUA==",
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/react-is": {
      "version": "19.0.0",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.0.0.tgz",
--- a/package.json
+++ b/package.json
@ -26,6 +26,7 @@
    "@mui/material": "^6.4.7",
    "@tanstack/react-virtual": "^3.13.2",
    "react": "^19.0.0",
+    "react-intersection-observer": "^9.16.0",
    "zustand": "^4.3.2"
  },
  "devDependencies": {
--- a/src/common/VirtualizedList.tsx
+++ b/src/common/VirtualizedList.tsx
@ -1,92 +1,176 @@
-import React, { CSSProperties, useCallback, useRef } from 'react'
+import React, {
+  CSSProperties,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+} from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
+import { useInView } from "react-intersection-observer";
+import { QortalMetadata } from "../types/interfaces/resources";

 interface PropsVirtualizedList {
-  list: any[]
+  list: any[];
  children: (item: any, index: number) => React.ReactNode;
+  onSeenLastItem?: (item: QortalMetadata)=> void;
 }
-export const VirtualizedList = ({list, children}: PropsVirtualizedList) => {
-      const parentRef = useRef(null);
+export const VirtualizedList = ({ list, children, onSeenLastItem }: PropsVirtualizedList) => {
+  const parentRef = useRef(null);
+
+  const rowVirtualizer = useVirtualizer({
+    count: list.length,
+    getItemKey: useCallback(
+      (index: number) =>
+        list[index]?.name && list[index]?.name
+          ? `${list[index].name}-${list[index].identifier}`
+          : list[index]?.id,
+      [list]
+    ),
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 80, // Provide an estimated height of items, adjust this as needed
+    overscan: 10, // Number of items to render outside the visible area to improve smoothness
+  });
+
+  const onSeenLastItemFunc = useCallback((lastItem: QortalMetadata) => {
+    if(onSeenLastItem){
+      onSeenLastItem(lastItem)
+    }
    
-      const rowVirtualizer = useVirtualizer({
-        count: list.length,
-        getItemKey: useCallback((index: number) => (list[index]?.name && list[index]?.name) ?`${list[index].name}-${list[index].identifier}`: list[index]?.id, [list]),
-        getScrollElement: () => parentRef.current,
-        estimateSize: () => 80, // Provide an estimated height of items, adjust this as needed
-        overscan: 10, // Number of items to render outside the visible area to improve smoothness
-      });
+  }, []);

  return (
-    <div
-    style={{
-      display: "flex",
-      width: "100%",
-      height: "100%",
-    }}
-  >
    <div
      style={{
-        height: "100%",
-        position: "relative",
        display: "flex",
-        flexDirection: "column",
        width: "100%",
+        height: "100%",
      }}
    >
      <div
-        ref={parentRef}
-        className="List"
        style={{
-          flexGrow: 1,
-          overflow: "auto",
+          height: "100%",
          position: "relative",
          display: "flex",
-          height: "0px",
+          flexDirection: "column",
+          width: "100%",
        }}
      >
        <div
+          ref={parentRef}
+          className="List"
          style={{
-            height: rowVirtualizer.getTotalSize(),
-            width: "100%",
+            flexGrow: 1,
+            overflow: "auto",
+            position: "relative",
+            display: "flex",
+            height: "0px",
          }}
        >
          <div
            style={{
-              position: "absolute",
-              top: 0,
-              left: 0,
+              height: rowVirtualizer.getTotalSize(),
              width: "100%",
            }}
          >
-            {rowVirtualizer.getVirtualItems().map((virtualRow) => {
-              const index = virtualRow.index;
-              const item = list[index];
-              return (
-                <div
-                  data-index={virtualRow.index} //needed for dynamic row height measurement
-                  ref={rowVirtualizer.measureElement} //measure dynamic row height
-                  key={`${item.name}-${item.identifier}`}
-                  style={{
-                    position: "absolute",
-                    top: 0,
-                    left: "50%", // Move to the center horizontally
-                    transform: `translateY(${virtualRow.start}px) translateX(-50%)`, // Adjust for centering
-                    width: "100%", // Control width (90% of the parent)
-                    display: "flex",
-                    alignItems: "center",
-                    overscrollBehavior: "none",
-                    flexDirection: "column"
-                  }}
-                >
-               {typeof children === "function" ? children(item, index) : null}
-
-                </div>
-              );
-            })}
+            <div
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+              }}
+            >
+              {rowVirtualizer.getVirtualItems().map((virtualRow) => {
+                const index = virtualRow.index;
+                const item = list[index];
+                return (
+                  <div
+                    data-index={virtualRow.index} //needed for dynamic row height measurement
+                    ref={rowVirtualizer.measureElement} //measure dynamic row height
+                    key={`${item.name}-${item.identifier}`}
+                    style={{
+                      position: "absolute",
+                      top: 0,
+                      left: "50%", // Move to the center horizontally
+                      transform: `translateY(${virtualRow.start}px) translateX(-50%)`, // Adjust for centering
+                      width: "100%", // Control width (90% of the parent)
+                      display: "flex",
+                      alignItems: "center",
+                      overscrollBehavior: "none",
+                      flexDirection: "column",
+                    }}
+                  >
+                    <MessageWrapper
+                      isLast={index === list?.length - 1}
+                      onSeen={() => onSeenLastItemFunc(item)}
+                    >
+                      {typeof children === "function"
+                        ? children(item, index)
+                        : null}
+                    </MessageWrapper>
+                  </div>
+                );
+              })}
+            </div>
          </div>
        </div>
      </div>
    </div>
-  </div>
-  )
+  );
+};
+
+interface MessageWrapperProps {
+  onSeen: () => void;
+  isLast: boolean;
+  children: ReactNode;
 }
+
+export const MessageWrapper: React.FC<MessageWrapperProps> = ({
+  onSeen,
+  isLast,
+  children,
+}) => {
+  if (isLast) {
+    return (
+      <WatchComponent onSeen={onSeen} isLast={isLast}>
+        {children}
+      </WatchComponent>
+    );
+  }
+  return <>{children}</>;
+};
+
+interface WatchComponentProps {
+  onSeen: () => void;
+  isLast: boolean;
+  children: ReactNode;
+}
+
+const WatchComponent: React.FC<WatchComponentProps> = ({
+  onSeen,
+  isLast,
+  children,
+}) => {
+  const { ref, inView } = useInView({
+    threshold: 0.7,
+    triggerOnce: true, // Ensure it only triggers once per mount
+  });
+
+  const hasBeenTriggered = useRef(false); // Prevent multiple triggers
+
+  useEffect(() => {
+    if (inView && isLast && onSeen && !hasBeenTriggered.current) {
+      onSeen();
+      hasBeenTriggered.current = true; // Mark as triggered
+    }
+  }, [inView, isLast, onSeen]);
+
+  return (
+    <div
+      ref={ref}
+      style={{ width: "100%", display: "flex", justifyContent: "center" }}
+    >
+      {children}
+    </div>
+  );
+};
--- a/src/components/ResourceList/ResourceListDisplay.tsx
+++ b/src/components/ResourceList/ResourceListDisplay.tsx
@ -37,6 +37,7 @@ interface PropsResourceListDisplay {
  defaultLoaderParams?: DefaultLoaderParams;
  loaderList?: (status: "LOADING" | "NO_RESULTS") => React.ReactNode; // Function type
  disableVirtualization?: boolean;
+  onSeenLastItem?: (listItem: QortalMetadata)=> void;
 }

 export const ResourceListDisplay = ({
@ -49,6 +50,7 @@ export const ResourceListDisplay = ({
  loaderItem,
  loaderList,
  disableVirtualization,
+  onSeenLastItem
 }: PropsResourceListDisplay) => {
  const [list, setList] = useState<QortalMetadata[]>([]);
  const { fetchResources } = useResources();
@ -94,7 +96,7 @@ export const ResourceListDisplay = ({
      >
        <div style={{ display: "flex", flexGrow: 1 }}>
          {!disableVirtualization && (
-            <VirtualizedList list={list}>
+            <VirtualizedList list={list} onSeenLastItem={onSeenLastItem}>
              {(item: QortalMetadata, index: number) => (
                <>
                  {styles?.gap && <Spacer height={`${styles.gap / 2}rem`} />}