rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use layout skeleton as the root route fallback

Browse Source 
On a hard reload the root route briefly showed a generic centered pulse
(PageSkeleton) while the layout chunk downloaded, then snapped to the
topbar skeleton. Point the root Fallback at MainLayoutSkeleton so the
chunk-load fallback matches the loader's own skeleton and the transition
is seamless. PageSkeleton is now unused and removed.

Signed-off-by: Émile Ré <emile@probo.com>
This commit is contained in:
Émile Ré
2026-06-26 22:35:20 +02:00
parent fe8ac00c70
commit 6ec7efb4fc
2 changed files with 2 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
apps/compliance-portal/src/components/skeletons/PageSkeleton.tsx
View File

@@ -1,21 +0,0 @@
// Copyright (c) 2026 Probo Inc <hello@probo.com>.
//
// Permission to use, copy, modify, and/or distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
export function PageSkeleton() {
return (
<div className="flex min-h-screen items-center justify-center bg-sand-1">
<div className="h-8 w-48 animate-pulse rounded bg-sand-4" />
</div>
);
}

4
apps/compliance-portal/src/routes.tsx
View File

@@ -16,14 +16,14 @@ import { lazy } from "@probo/react-lazy";
import { type AppRoute, routeFromAppRoute } from "@probo/routes";
import { createBrowserRouter } from "react-router";
import { PageSkeleton } from "#/components/skeletons/PageSkeleton";
import { getPathPrefix } from "#/lib/http/pathPrefix";
import { HomePageSkeleton } from "#/pages/HomePageSkeleton";
import { MainLayoutSkeleton } from "#/pages/MainLayoutSkeleton";
const routes = [
{
path: "/",
Fallback: PageSkeleton,
Fallback: MainLayoutSkeleton,
Component: lazy(() => import("#/pages/MainLayoutLoader")),
children: [
{