Skip to content

impr(new-nav): env overview loading and ErrorBoundary #2397

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rmnbrd merged 2 commits into from
Feb 19, 2026
Merged

impr(new-nav): env overview loading and ErrorBoundary #2397

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ae90e02
impr(new-nav): env overview loading and ErrorBoundary
rmnbrd Feb 17, 2026
8808fc8
fix: update snapshots
rmnbrd Feb 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 65 additions & 8 deletions ...d/organization/$organizationId/project/$projectId/environment/$environmentId/overview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -66,15 +68,70 @@ function EnvironmentOverview() {
)
}

function RouteComponent() {
function ServiceListSkeleton() {
const columnSizes = ['40%', '15%', '15%', '20%', '10%']

return (
<Suspense
fallback={
<div className="flex min-h-screen items-center justify-center">
<LoaderSpinner className="w-6" />
<div className="container mx-auto mt-6 pb-10">
<Section className="gap-8">
<div className="flex flex-col gap-6">
<div className="flex justify-between">
<div className="flex items-center gap-3">
<Skeleton height={32} width={32} />
<Skeleton height={32} width={100} />
</div>
</div>
<hr className="w-full border-neutral" />
</div>
}
>
<div className="flex flex-col gap-8">
<Section className="flex flex-col gap-3.5">
<div className="flex items-center justify-between">
<Skeleton height={28} width={90} />
<Skeleton height={28} width={140} />
</div>
<Table.Root className="w-full border-b">
<Table.Header>
<Table.Row>
{[...Array(5)].map((_, index) => (
<Table.ColumnHeaderCell
key={index}
className="first:border-r"
style={{ width: columnSizes[index] }}
>
<Skeleton height={16} width={100} />
</Table.ColumnHeaderCell>
))}
</Table.Row>
</Table.Header>
<Table.Body>
{[...Array(3)].map((_, index) => (
<Table.Row key={index}>
{[...Array(5)].map((_, index) => (
<Table.Cell key={index} className="h-14 first:border-r" style={{ width: columnSizes[index] }}>
{index === 0 ? (
<div className="flex items-center justify-between">
<Skeleton height={16} width={300} />
<Skeleton height={16} width={200} />
</div>
) : (
<Skeleton height={16} width={60} />
)}
</Table.Cell>
))}
</Table.Row>
))}
</Table.Body>
</Table.Root>
</Section>
</div>
</Section>
</div>
)
}

function RouteComponent() {
return (
<Suspense fallback={<ServiceListSkeleton />}>
<EnvironmentOverview />
</Suspense>
)
Expand Down
34 changes: 18 additions & 16 deletions apps/console-v5/src/routes/_authenticated/organization/route.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -341,21 +341,23 @@ function OrganizationRoute() {
<div className="flex h-dvh w-full flex-col bg-background">
{/* TODO: Conflicts with body main:not(.h-screen, .layout-onboarding) */}
<div className="min-h-0 flex-1 overflow-auto">
<Suspense fallback={<MainLoader />}>
<>
<Header />

<div className="sticky top-0 z-header border-b border-neutral bg-background-secondary px-4">
<Navbar.Root activeId={activeTabId} className="container relative top-[1px] mx-0 -mt-[1px]">
{navigationContext && <NavigationBar context={navigationContext} />}
</Navbar.Root>
</div>

<div className={needsFullWidth ? 'min-h-0' : 'container mx-auto min-h-0 px-4'}>
<Outlet />
</div>
</>
</Suspense>
<ErrorBoundary>
<Suspense fallback={<MainLoader />}>
<>
<Header />

<div className="sticky top-0 z-header border-b border-neutral bg-background-secondary px-4">
<Navbar.Root activeId={activeTabId} className="container relative top-[1px] mx-0 -mt-[1px]">
{navigationContext && <NavigationBar context={navigationContext} />}
</Navbar.Root>
</div>

<div className={needsFullWidth ? 'min-h-0' : 'container mx-auto min-h-0 px-4'}>
<Outlet />
</div>
</>
</Suspense>
</ErrorBoundary>
</div>
</div>
)
Expand Down
50 changes: 25 additions & 25 deletions ...nvironments/feature/src/lib/environment-list/__snapshots__/environment-list.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
<thead>
<tr>
<th
class="h-11 px-4 text-left font-code font-medium first:border-r"
class="h-11 border-neutral px-4 text-left font-code font-medium first:border-r"
style="width: 40%;"
>
<div
Expand All @@ -34,7 +34,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
</div>
</th>
<th
class="h-11 px-4 text-left font-code font-medium first:border-r"
class="h-11 border-neutral px-4 text-left font-code font-medium first:border-r"
style="width: 15%;"
>
<div
Expand All @@ -57,7 +57,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
</div>
</th>
<th
class="h-11 px-4 text-left font-code font-medium first:border-r"
class="h-11 border-neutral px-4 text-left font-code font-medium first:border-r"
style="width: 15%;"
>
<div
Expand All @@ -80,7 +80,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
</div>
</th>
<th
class="h-11 px-4 text-left font-code font-medium first:border-r"
class="h-11 border-neutral px-4 text-left font-code font-medium first:border-r"
style="width: 20%;"
>
<div
Expand All @@ -103,7 +103,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
</div>
</th>
<th
class="h-11 px-4 text-left font-code font-medium first:border-r"
class="h-11 border-neutral px-4 text-left font-code font-medium first:border-r"
style="width: 10%;"
>
<button
Expand All @@ -122,7 +122,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
class="h-16 cursor-pointer hover:bg-neutral-100"
>
<td
class="h-14 px-4 py-0 first:border-r"
class="h-14 border-neutral px-4 py-0 first:border-r"
style="width: 40%;"
>
<div
Expand Down Expand Up @@ -167,7 +167,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
</div>
</td>
<td
class="h-14 px-4 py-0 first:border-r"
class="h-14 border-neutral px-4 py-0 first:border-r"
style="width: 15%;"
>
<div
Expand Down Expand Up @@ -216,7 +216,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
</div>
</td>
<td
class="h-14 px-4 py-0 first:border-r"
class="h-14 border-neutral px-4 py-0 first:border-r"
style="width: 15%;"
>
<div
Expand Down Expand Up @@ -265,7 +265,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
</div>
</td>
<td
class="h-14 px-4 py-0 first:border-r"
class="h-14 border-neutral px-4 py-0 first:border-r"
style="width: 20%;"
>
<a
Expand Down Expand Up @@ -302,7 +302,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
</a>
</td>
<td
class="h-14 px-4 py-0 first:border-r"
class="h-14 border-neutral px-4 py-0 first:border-r"
style="width: 10%;"
>
<span
Expand All @@ -317,7 +317,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
class="h-16 cursor-pointer hover:bg-neutral-100"
>
<td
class="h-14 px-4 py-0 first:border-r"
class="h-14 border-neutral px-4 py-0 first:border-r"
style="width: 40%;"
>
<div
Expand Down Expand Up @@ -362,7 +362,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
</div>
</td>
<td
class="h-14 px-4 py-0 first:border-r"
class="h-14 border-neutral px-4 py-0 first:border-r"
style="width: 15%;"
>
<div
Expand Down Expand Up @@ -411,7 +411,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
</div>
</td>
<td
class="h-14 px-4 py-0 first:border-r"
class="h-14 border-neutral px-4 py-0 first:border-r"
style="width: 15%;"
>
<div
Expand Down Expand Up @@ -446,7 +446,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
</div>
</td>
<td
class="h-14 px-4 py-0 first:border-r"
class="h-14 border-neutral px-4 py-0 first:border-r"
style="width: 20%;"
>
<a
Expand Down Expand Up @@ -476,7 +476,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
</a>
</td>
<td
class="h-14 px-4 py-0 first:border-r"
class="h-14 border-neutral px-4 py-0 first:border-r"
style="width: 10%;"
>
<span
Expand All @@ -491,7 +491,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
class="h-16 cursor-pointer hover:bg-neutral-100"
>
<td
class="h-14 px-4 py-0 first:border-r"
class="h-14 border-neutral px-4 py-0 first:border-r"
style="width: 40%;"
>
<div
Expand Down Expand Up @@ -536,7 +536,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
</div>
</td>
<td
class="h-14 px-4 py-0 first:border-r"
class="h-14 border-neutral px-4 py-0 first:border-r"
style="width: 15%;"
>
<div
Expand Down Expand Up @@ -585,7 +585,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
</div>
</td>
<td
class="h-14 px-4 py-0 first:border-r"
class="h-14 border-neutral px-4 py-0 first:border-r"
style="width: 15%;"
>
<div
Expand Down Expand Up @@ -620,7 +620,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
</div>
</td>
<td
class="h-14 px-4 py-0 first:border-r"
class="h-14 border-neutral px-4 py-0 first:border-r"
style="width: 20%;"
>
<a
Expand Down Expand Up @@ -650,7 +650,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
</a>
</td>
<td
class="h-14 px-4 py-0 first:border-r"
class="h-14 border-neutral px-4 py-0 first:border-r"
style="width: 10%;"
>
<span
Expand All @@ -665,7 +665,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
class="h-16 cursor-pointer hover:bg-neutral-100"
>
<td
class="h-14 px-4 py-0 first:border-r"
class="h-14 border-neutral px-4 py-0 first:border-r"
style="width: 40%;"
>
<div
Expand Down Expand Up @@ -710,7 +710,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
</div>
</td>
<td
class="h-14 px-4 py-0 first:border-r"
class="h-14 border-neutral px-4 py-0 first:border-r"
style="width: 15%;"
>
<div
Expand Down Expand Up @@ -759,7 +759,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
</div>
</td>
<td
class="h-14 px-4 py-0 first:border-r"
class="h-14 border-neutral px-4 py-0 first:border-r"
style="width: 15%;"
>
<div
Expand Down Expand Up @@ -808,7 +808,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
</div>
</td>
<td
class="h-14 px-4 py-0 first:border-r"
class="h-14 border-neutral px-4 py-0 first:border-r"
style="width: 20%;"
>
<a
Expand Down Expand Up @@ -838,7 +838,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
</a>
</td>
<td
class="h-14 px-4 py-0 first:border-r"
class="h-14 border-neutral px-4 py-0 first:border-r"
style="width: 10%;"
>
<span
Expand Down
Loading