load resource status lazily (#583)

Co-authored-by: Yunlu Wen <yunlu.wen@transwarp.io>

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",

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 ${