From ae90e0281bc3deadb6f8bf73c5db1164d296a24e Mon Sep 17 00:00:00 2001 From: Romain Billard Date: Tue, 17 Feb 2026 10:53:19 +0100 Subject: [PATCH 1/2] impr(new-nav): env overview loading and ErrorBoundary --- .../environment/$environmentId/overview.tsx | 73 +++++++++++++++++-- .../_authenticated/organization/route.tsx | 34 +++++---- .../src/lib/service-list/service-list.tsx | 7 +- .../table-primitives/table-primitives.tsx | 4 +- 4 files changed, 86 insertions(+), 32 deletions(-) diff --git a/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/overview.tsx b/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/overview.tsx index 8d50264e0ea..69ff2e2f061 100644 --- a/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/overview.tsx +++ b/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/overview.tsx @@ -3,7 +3,9 @@ import { Suspense } from 'react' import { EnvironmentMode, useEnvironment } from '@qovery/domains/environments/feature' import { ServiceList } from '@qovery/domains/services/feature' import { SERVICES_NEW_URL, SERVICES_URL } from '@qovery/shared/routes' -import { Heading, Icon, Link, LoaderSpinner, Section } from '@qovery/shared/ui' +import { Heading, Icon, Link, Section, Skeleton, TablePrimitives } from '@qovery/shared/ui' + +const { Table } = TablePrimitives export const Route = createFileRoute( '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/overview' @@ -66,15 +68,70 @@ function EnvironmentOverview() { ) } -function RouteComponent() { +function ServiceListSkeleton() { + const columnSizes = ['40%', '15%', '15%', '20%', '10%'] + return ( - - +
+
+
+
+
+ + +
+
+
- } - > +
+
+
+ + +
+ + + + {[...Array(5)].map((_, index) => ( + + + + ))} + + + + {[...Array(3)].map((_, index) => ( + + {[...Array(5)].map((_, index) => ( + + {index === 0 ? ( +
+ + +
+ ) : ( + + )} + + ))} + + ))} + + +
+
+
+
+ ) +} + +function RouteComponent() { + return ( + }> ) diff --git a/apps/console-v5/src/routes/_authenticated/organization/route.tsx b/apps/console-v5/src/routes/_authenticated/organization/route.tsx index f95b1606ae4..d1bd7e65b6f 100644 --- a/apps/console-v5/src/routes/_authenticated/organization/route.tsx +++ b/apps/console-v5/src/routes/_authenticated/organization/route.tsx @@ -1,7 +1,7 @@ import { type IconName } from '@fortawesome/fontawesome-common-types' import { Outlet, createFileRoute, useLocation, useMatches, useParams } from '@tanstack/react-router' import { Suspense } from 'react' -import { Icon, LoaderSpinner, Navbar } from '@qovery/shared/ui' +import { ErrorBoundary, Icon, LoaderSpinner, Navbar } from '@qovery/shared/ui' import { queries } from '@qovery/state/util-queries' import Header from '../../../app/components/header/header' import { type FileRouteTypes } from '../../../routeTree.gen' @@ -341,21 +341,23 @@ function OrganizationRoute() {
{/* TODO: Conflicts with body main:not(.h-screen, .layout-onboarding) */}
- }> - <> -
- -
- - {navigationContext && } - -
- -
- -
- - + + }> + <> +
+ +
+ + {navigationContext && } + +
+ +
+ +
+ + +
) diff --git a/libs/domains/services/feature/src/lib/service-list/service-list.tsx b/libs/domains/services/feature/src/lib/service-list/service-list.tsx index a0af14efda0..fbf2b015936 100644 --- a/libs/domains/services/feature/src/lib/service-list/service-list.tsx +++ b/libs/domains/services/feature/src/lib/service-list/service-list.tsx @@ -83,7 +83,6 @@ import { ServiceAvatar } from '../service-avatar/service-avatar' import { ServiceLinksPopover } from '../service-links-popover/service-links-popover' import { ServiceTemplateIndicator } from '../service-template-indicator/service-template-indicator' import { ServiceListActionBar } from './service-list-action-bar' -import { ServiceListSkeleton } from './service-list-skeleton' const { Table } = TablePrimitives @@ -325,7 +324,7 @@ export function ServiceList({ className, environment, ...props }: ServiceListPro const organizationId = environment.organization.id || '' const projectId = environment.project.id || '' - const { data: services = [], isLoading: isServicesLoading } = useServices({ environmentId }) + const { data: services = [] } = useServices({ environmentId, suspense: true }) const { data: checkRunningStatusClosed } = useCheckRunningStatusClosed({ clusterId, environmentId, @@ -753,10 +752,6 @@ export function ServiceList({ className, environment, ...props }: ServiceListPro }, }) - if (services.length === 0 && isServicesLoading) { - return - } - if (services.length === 0) { return ( , TableCellProps>(function TableCel ref ) { return ( - + {children} ) @@ -88,7 +88,7 @@ const TableColumnHeaderCell = forwardRef, TableColumnHeaderCell ref ) { return ( - + {children} ) From 8808fc86c86a09d4741e65b207479ad69a847e40 Mon Sep 17 00:00:00 2001 From: Romain Billard Date: Tue, 17 Feb 2026 11:16:49 +0100 Subject: [PATCH 2/2] fix: update snapshots --- .../environment-list.spec.tsx.snap | 50 +++---- .../__snapshots__/pods-metrics.spec.tsx.snap | 32 ++--- .../__snapshots__/service-list.spec.tsx.snap | 40 +++--- .../output-variables.spec.tsx.snap | 16 +-- .../__snapshots__/variable-list.spec.tsx.snap | 124 +++++++++--------- 5 files changed, 131 insertions(+), 131 deletions(-) diff --git a/libs/domains/environments/feature/src/lib/environment-list/__snapshots__/environment-list.spec.tsx.snap b/libs/domains/environments/feature/src/lib/environment-list/__snapshots__/environment-list.spec.tsx.snap index c46b4042b72..feac9733ffd 100644 --- a/libs/domains/environments/feature/src/lib/environment-list/__snapshots__/environment-list.spec.tsx.snap +++ b/libs/domains/environments/feature/src/lib/environment-list/__snapshots__/environment-list.spec.tsx.snap @@ -11,7 +11,7 @@ exports[`EnvironmentList should match snapshot 1`] = `