mirror/helm-dashboard
1
0
Fork 0
mirror of https://github.com/komodorio/helm-dashboard.git synced 2026-03-24 11:48:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

load resource status lazily (#583)

Browse Source 
Co-authored-by: Yunlu Wen <yunlu.wen@transwarp.io>
This commit is contained in:
Yunlu Wen
2025-03-27 19:47:30 +08:00
committed by GitHub
parent 6517c47754
commit 5737e8495c
2 changed files with 8 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/package.json
View File

@@ -21,6 +21,7 @@
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-error-boundary": "^4.0.10", "react-error-boundary": "^4.0.10",
"react-icons": "^4.8.0", "react-icons": "^4.8.0",
"react-intersection-observer": "^9.16.0",
"react-modern-drawer": "^1.2.0", "react-modern-drawer": "^1.2.0",
"react-router-dom": "^6.9.0", "react-router-dom": "^6.9.0",
"react-select": "^5.7.4", "react-select": "^5.7.4",

8
frontend/src/components/InstalledPackages/InstalledPackageCard.tsx
View File

@@ -15,6 +15,7 @@ import { useGetLatestVersion } from "../../API/releases";
import { isNewerVersion } from "../../utils"; import { isNewerVersion } from "../../utils";
import { LatestChartVersion } from "../../API/interfaces"; import { LatestChartVersion } from "../../API/interfaces";
import useNavigateWithSearchParams from "../../hooks/useNavigateWithSearchParams"; import useNavigateWithSearchParams from "../../hooks/useNavigateWithSearchParams";
import {useInView} from "react-intersection-observer";
type InstalledPackageCardProps = { type InstalledPackageCardProps = {
release: Release; release: Release;
@@ -26,7 +27,10 @@ export default function InstalledPackageCard({
const navigate = useNavigateWithSearchParams(); const navigate = useNavigateWithSearchParams();
const [isMouseOver, setIsMouseOver] = useState(false); const [isMouseOver, setIsMouseOver] = useState(false);
const {ref, inView} = useInView({
threshold: 0.3,
triggerOnce: true,
});
const { data: latestVersionResult } = useGetLatestVersion(release.chartName, { const { data: latestVersionResult } = useGetLatestVersion(release.chartName, {
queryKey: ["chartName", release.chartName], queryKey: ["chartName", release.chartName],
cacheTime: 0, cacheTime: 0,
@@ -34,6 +38,7 @@ export default function InstalledPackageCard({
const { data: statusData } = useQuery<unknown>({ const { data: statusData } = useQuery<unknown>({
queryKey: ["resourceStatus", release], queryKey: ["resourceStatus", release],
enabled: inView,
queryFn: () => apiService.getResourceStatus({ release }), queryFn: () => apiService.getResourceStatus({ release }),
}); });
@@ -73,6 +78,7 @@ export default function InstalledPackageCard({
return ( return (
<div <div
ref={ref}
className={`${ className={`${
borderLeftColor[release.status] 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 ${ } 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 ${