Skip to content

perf: fix manifest, add preconnect hints, dynamic devtools, and loading indicator #34

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
markbang merged 1 commit into from
May 20, 2026
Merged

perf: fix manifest, add preconnect hints, dynamic devtools, and loading indicator #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 0 additions & 2 deletions apps/site/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,13 +33,11 @@
"@tanstack/devtools-vite": "^0.3.12",
"@tanstack/react-devtools": "^0.7.11",
"@tanstack/react-router-devtools": "^1.166.2",
"@testing-library/dom": "^10.4.1",
"@testing-library/react": "^16.3.2",
"@types/node": "^22.19.13",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^5.1.4",
"jsdom": "^27.4.0",
"typescript": "^5.9.3",
"vite": "^7.3.1",
"vitest": "^3.2.4"
Expand Down
13 changes: 12 additions & 1 deletion apps/site/public/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,12 @@
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
{
"name": "Memos Embed",
"short_name": "MemosEmbed",
"description": "Embeddable memo cards for Memos — iframe, Web Component, and React snippets",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#111827",
"background_color": "#ffffff",
"display": "standalone"
}
51 changes: 34 additions & 17 deletions apps/site/src/routes/__root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import { TanStackDevtools } from "@tanstack/react-devtools";
import {
createRootRouteWithContext,
HeadContent,
Scripts,
useLocation,
} from "@tanstack/react-router";
import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
import { type ReactNode, useEffect, useState } from "react";
import StaticHeadContent from "@/components/StaticHeadContent";
import { isStaticMarketingPath } from "@/lib/route-mode";
import { buildPageHead, SITE_DESCRIPTION } from "@/lib/site-meta";
Expand All @@ -15,8 +14,6 @@ import appCss from "../styles.css?url";

export const Route = createRootRouteWithContext<object>()({
beforeLoad: async () => {
// Other redirect strategies are possible; see
// https://github.com/TanStack/router/tree/main/examples/react/i18n-paraglide#offline-redirect
if (typeof document !== "undefined") {
document.documentElement.setAttribute("lang", getLocale());
}
Expand Down Expand Up @@ -44,6 +41,8 @@ export const Route = createRootRouteWithContext<object>()({
rel: "stylesheet",
href: appCss,
},
{ rel: "preconnect", href: "https://unpkg.com" },
{ rel: "dns-prefetch", href: "https://unpkg.com" },
],
}),

Expand All @@ -63,21 +62,39 @@ function RootDocument({ children }: { children: React.ReactNode }) {
</head>
<body>
{children}
{showDevtools ? (
<TanStackDevtools
config={{
position: "bottom-right",
}}
plugins={[
{
name: "Tanstack Router",
render: <TanStackRouterDevtoolsPanel />,
},
]}
/>
) : null}
{showDevtools ? <DevToolsHost /> : null}
{isMarketingPage ? null : <Scripts />}
</body>
</html>
);
}

function DevToolsHost() {
const [plugins, setPlugins] = useState<ReactNode[] | null>(null);

useEffect(() => {
Promise.all([
import("@tanstack/react-devtools"),
import("@tanstack/react-router-devtools"),
]).then(([devtoolsMod, routerMod]) => {
const TanStackDevtools = devtoolsMod.TanStackDevtools;
const TanStackRouterDevtoolsPanel = routerMod.TanStackRouterDevtoolsPanel;

setPlugins([
<TanStackDevtools
key="devtools"
config={{ position: "bottom-right" }}
plugins={[
{
name: "Tanstack Router",
render: <TanStackRouterDevtoolsPanel />,
},
]}
/>,
]);
});
Comment on lines +79 to +95
Copy link
Copy Markdown

@cubic-dev-ai cubic-dev-ai Bot May 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: Handle dynamic import failures in DevToolsHost to avoid unhandled promise rejections.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At apps/site/src/routes/__root.tsx, line 79:

<comment>Handle dynamic import failures in `DevToolsHost` to avoid unhandled promise rejections.</comment>

<file context>
@@ -63,21 +62,39 @@ function RootDocument({ children }: { children: React.ReactNode }) {
+		Promise.all([
+			import("@tanstack/react-devtools"),
+			import("@tanstack/react-router-devtools"),
+		]).then(([devtoolsMod, routerMod]) => {
+			const TanStackDevtools = devtoolsMod.TanStackDevtools;
+			const TanStackRouterDevtoolsPanel = routerMod.TanStackRouterDevtoolsPanel;
</file context>
Suggested change
]).then(([devtoolsMod, routerMod]) => {
const TanStackDevtools = devtoolsMod.TanStackDevtools;
const TanStackRouterDevtoolsPanel = routerMod.TanStackRouterDevtoolsPanel;
setPlugins([
<TanStackDevtools
key="devtools"
config={{ position: "bottom-right" }}
plugins={[
{
name: "Tanstack Router",
render: <TanStackRouterDevtoolsPanel />,
},
]}
/>,
]);
});
]).then(([devtoolsMod, routerMod]) => {
const TanStackDevtools = devtoolsMod.TanStackDevtools;
const TanStackRouterDevtoolsPanel = routerMod.TanStackRouterDevtoolsPanel;
setPlugins([
<TanStackDevtools
key="devtools"
config={{ position: "bottom-right" }}
plugins={[
{
name: "Tanstack Router",
render: <TanStackRouterDevtoolsPanel />,
},
]}
/>,
]);
}).catch(() => {
setPlugins(null);
});

}, []);

if (!plugins) return null;
return <>{plugins}</>;
}
10 changes: 10 additions & 0 deletions apps/site/src/routes/_site/route.lazy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {
createLazyFileRoute,
Outlet,
useLocation,
useRouterState,
} from "@tanstack/react-router";
import { useId } from "react";
import Footer from "@/components/Footer";
Expand All @@ -16,11 +17,20 @@ export const Route = createLazyFileRoute("/_site")({

function SiteLayout() {
const pathname = useLocation({ select: (location) => location.pathname });
const isLoading = useRouterState({ select: (s) => s.isLoading });
const mainContentId = useId();
const isMarketingPage = isStaticMarketingPath(pathname);

return (
<>
{isLoading ? (
<div
className="fixed top-0 left-0 right-0 z-[60] h-0.5 bg-primary/30"
aria-hidden="true"
>
<div className="h-full animate-[loading-bar_1.5s_ease-in-out_infinite] bg-primary" />
</div>
) : null}
<a
href={`#${mainContentId}`}
className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-[60] focus:rounded-md focus:bg-background focus:px-3 focus:py-2 focus:text-sm focus:font-medium focus:text-foreground"
Expand Down
6 changes: 6 additions & 0 deletions apps/site/src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@

@custom-variant dark (&:is(.dark *));

@keyframes loading-bar {
0% { transform: translateX(-100%); }
50% { transform: translateX(0%); }
100% { transform: translateX(100%); }
}

html {
scroll-behavior: smooth;
}
Expand Down
Loading
Loading