From 5737e8495c69f8e91712ede95e7d5dc82e535212 Mon Sep 17 00:00:00 2001
From: Yunlu Wen <wylswz@163.com>
Date: Thu, 27 Mar 2025 19:47:30 +0800
Subject: [PATCH] load resource status lazily (#583)

Co-authored-by: Yunlu Wen <yunlu.wen@transwarp.io>
---
 frontend/package.json                                     | 1 +
 .../components/InstalledPackages/InstalledPackageCard.tsx | 8 +++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/package.json b/frontend/package.json
index 738e173..fd3ef3e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -21,6 +21,7 @@
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.10",
     "react-icons": "^4.8.0",
+    "react-intersection-observer": "^9.16.0",
     "react-modern-drawer": "^1.2.0",
     "react-router-dom": "^6.9.0",
     "react-select": "^5.7.4",
diff --git a/frontend/src/components/InstalledPackages/InstalledPackageCard.tsx b/frontend/src/components/InstalledPackages/InstalledPackageCard.tsx
index 658f9e5..875160a 100644
--- a/frontend/src/components/InstalledPackages/InstalledPackageCard.tsx
+++ b/frontend/src/components/InstalledPackages/InstalledPackageCard.tsx
@@ -15,6 +15,7 @@ import { useGetLatestVersion } from "../../API/releases";
 import { isNewerVersion } from "../../utils";
 import { LatestChartVersion } from "../../API/interfaces";
 import useNavigateWithSearchParams from "../../hooks/useNavigateWithSearchParams";
+import {useInView} from "react-intersection-observer";
 
 type InstalledPackageCardProps = {
   release: Release;
@@ -26,7 +27,10 @@ export default function InstalledPackageCard({
   const navigate = useNavigateWithSearchParams();
 
   const [isMouseOver, setIsMouseOver] = useState(false);
-
+  const {ref, inView} = useInView({
+    threshold: 0.3,
+    triggerOnce: true,
+  });
   const { data: latestVersionResult } = useGetLatestVersion(release.chartName, {
     queryKey: ["chartName", release.chartName],
     cacheTime: 0,
@@ -34,6 +38,7 @@ export default function InstalledPackageCard({
 
   const { data: statusData } = useQuery<unknown>({
     queryKey: ["resourceStatus", release],
+    enabled: inView,
     queryFn: () => apiService.getResourceStatus({ release }),
   });
 
@@ -73,6 +78,7 @@ export default function InstalledPackageCard({
 
   return (
     <div
+      ref={ref}
       className={`${
         borderLeftColor[release.status]
       } text-xs grid grid-cols-12 items-center bg-white rounded-md p-2 py-6 my-2 custom-shadow border-l-4 border-l-[${statusColor}] cursor-pointer ${