diff --git a/apps/nextjs/src/app/[locale]/init/_steps/integrations/docker-discovery-panel.tsx b/apps/nextjs/src/app/[locale]/init/_steps/integrations/docker-discovery-panel.tsx index 38d1b0dc5..90ac7a68b 100644 --- a/apps/nextjs/src/app/[locale]/init/_steps/integrations/docker-discovery-panel.tsx +++ b/apps/nextjs/src/app/[locale]/init/_steps/integrations/docker-discovery-panel.tsx @@ -7,6 +7,7 @@ import { Card, Collapse, Group, + Loader, Paper, ScrollArea, SimpleGrid, @@ -43,6 +44,7 @@ interface DockerDiscoveryIndicatorProps { apps: DiscoveredApp[]; selectedAppIds: Set; onToggleApp: (containerId: string) => void; + isLoading: boolean; } const APP_CARD_HEIGHT = 80; @@ -52,6 +54,7 @@ export const DockerDiscoveryIndicator = ({ apps, selectedAppIds, onToggleApp, + isLoading, }: DockerDiscoveryIndicatorProps) => { const hasApps = apps.length > 0; const [expanded, setExpanded] = useState(false); @@ -67,10 +70,39 @@ export const DockerDiscoveryIndicator = ({ const t = useScopedI18n("init.step.integrations.docker"); const totalCount = integrations.length + apps.length; - if (totalCount === 0) return null; + if (!isLoading && totalCount === 0) return null; const selectedAppCount = apps.filter((app) => selectedAppIds.has(app.containerId)).length; + if (isLoading) { + return ( + + + + + + + + {t("scanning")} + + + {t("scanningDescription")} + + + + + + ); + } + return ( { const { mutateAsync: setupIntegrations } = clientApi.onboard.setupIntegrations.useMutation(); const { mutateAsync: createApps } = clientApi.onboard.createAppsFromDiscovery.useMutation(); - const { data: dockerData } = clientApi.onboard.discoverDockerServices.useQuery(undefined, { - retry: false, - refetchOnWindowFocus: false, - }); + const { data: dockerData, isPending: isDockerLoading } = clientApi.onboard.discoverDockerServices.useQuery( + undefined, + { + retry: false, + refetchOnWindowFocus: false, + }, + ); const dockerIntegrations = dockerData?.status === "success" ? dockerData.integrations : []; const dockerApps = dockerData?.status === "success" ? dockerData.apps : []; @@ -206,6 +209,7 @@ export const InitIntegrations = () => { apps={dockerApps} selectedAppIds={selectedAppIds} onToggleApp={handleToggleApp} + isLoading={isDockerLoading} /> @@ -249,6 +253,7 @@ export const InitIntegrations = () => { onClick={handleContinueToConfig} disabled={selectedKinds.length === 0 || undefined} rightSection={} + suppressHydrationWarning > {t("action.continue")} {selectedKinds.length > 0 && `(${selectedKinds.length})`} diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json index bf78f068b..a545a59cf 100644 --- a/packages/translation/src/lang/en.json +++ b/packages/translation/src/lang/en.json @@ -125,7 +125,9 @@ "detected": "Docker detected {count} services", "detectedBreakdown": "{integrations} integrations ยท {apps} apps", "appBadge": "App", - "appSectionLabel": "Apps to add to dashboard ({count} selected)" + "appSectionLabel": "Apps to add to dashboard ({count} selected)", + "scanning": "Scanning Docker...", + "scanningDescription": "Looking for running containers on your system" } }, "finish": {