+
);
}
diff --git a/src/components/ScoreRing.tsx b/src/components/ScoreRing.tsx
index 4604fe1..92f35a8 100644
--- a/src/components/ScoreRing.tsx
+++ b/src/components/ScoreRing.tsx
@@ -1,5 +1,5 @@
import { useEffect } from "react";
-import { animate, motion, useMotionValue, useReducedMotion, useTransform } from "motion/react";
+import { animate, m, useMotionValue, useReducedMotion, useTransform } from "motion/react";
export function ScoreRing({ score }: { score: number }) {
const clamped = Math.max(0, Math.min(100, score));
@@ -38,7 +38,7 @@ export function ScoreRing({ score }: { score: number }) {
stroke="var(--color-border)"
strokeWidth="10"
/>
-
-
+
{shown}
-
+
out of 100
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index 4ac9a4f..a1a519c 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -6,7 +6,9 @@ import {
useRouter,
HeadContent,
Scripts,
+ type ErrorComponentProps,
} from "@tanstack/react-router";
+import { LazyMotion, domAnimation } from "motion/react";
import { useEffect, type ReactNode } from "react";
import appCss from "../styles.css?url";
@@ -35,7 +37,9 @@ function NotFoundComponent() {
);
}
-function ErrorComponent({ error, reset }: { error: Error; reset: () => void }) {
+// Router-provided props: `error` is whatever was thrown (newer TanStack Router types it as
+// `unknown`), and everything below already handles a non-Error value.
+function ErrorComponent({ error, reset }: ErrorComponentProps) {
const router = useRouter();
useEffect(() => {
console.error(error);
@@ -125,13 +129,20 @@ function RootShell({ children }: { children: ReactNode }) {
);
}
+// Components use Motion's slim `m.*` elements with only the domAnimation feature set (animate,
+// exit, variants, hover/tap/in-view gestures; no layout or drag), instead of `motion.*`, which
+// bundles every feature. `strict` makes a stray `motion.*` throw in development. The features are
+// passed synchronously on purpose: loading them async re-renders every animated element once they
+// arrive and starts the entrance animations late, which measured worse in Lighthouse.
function RootComponent() {
const { queryClient } = Route.useRouteContext();
return (
- {/* Required: nested routes render here. Removing breaks all child routes. */}
-
+
+ {/* Required: nested routes render here. Removing breaks all child routes. */}
+
+
);
}
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 9b0aaab..120406a 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,8 +1,8 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { lazy, Suspense, useEffect, useRef, useState } from "react";
import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { useMutation } from "@tanstack/react-query";
import { useServerFn } from "@tanstack/react-start";
-import { AnimatePresence, MotionConfig, motion } from "motion/react";
+import { AnimatePresence, MotionConfig, m } from "motion/react";
import {
ArrowRight,
Clock,
@@ -16,20 +16,23 @@ import {
} from "lucide-react";
import { auditUrl } from "@/lib/audit.functions";
-import { analyse } from "@/lib/analysis";
+import type { Analysis } from "@/lib/analysis";
import type { AuditResponse } from "@/lib/audit-types";
-import { PreviewCards } from "@/components/PreviewCards";
import { OG_IMAGE_URL, SITE_URL } from "@/lib/site";
-import { FixList } from "@/components/FixList";
-import { ScoreRing } from "@/components/ScoreRing";
import { Backdrop } from "@/components/Backdrop";
import { Landing } from "@/components/Landing";
-import { ResultActions } from "@/components/ResultActions";
import { SiteFooter, SiteHeader } from "@/components/SiteChrome";
import { loadRecent, saveRecent, type RecentCheck } from "@/lib/recent";
-import { Badge } from "@/components/ui/badge";
import { Button, buttonVariants } from "@/components/ui/button";
+// The report (score ring, previews, fixes, export actions) and the scoring code only matter once
+// a check has run, so they live in their own chunks. A check starts fetching both alongside the
+// audit request, so they are normally in place before the result arrives.
+const loadAuditReport = () => import("@/components/AuditReport");
+const AuditReport = lazy(() => loadAuditReport().then((mod) => ({ default: mod.AuditReport })));
+
+type Checked = { response: AuditResponse; analysis: Analysis | null };
+
const TITLE = "PreviewProof: see how your app looks when people share it";
const DESCRIPTION =
"Paste a public URL and see the Google, X, LinkedIn, Slack and WhatsApp previews your app produces today, what's broken, and copy-paste fixes.";
@@ -108,11 +111,11 @@ function LoadingPanel() {
return () => clearInterval(t);
}, []);
return (
-
+
-
{LOADING_STEPS[step]}
-
+
@@ -132,7 +135,7 @@ function LoadingPanel() {
))}
-
+
);
}
@@ -149,12 +152,19 @@ function Index() {
const autoRan = useRef(false);
const run = useServerFn(auditUrl);
- const mutation = useMutation