fix(ui): non-destructive pending boundary — compact spinner, 333ms threshold (#841)

* fix(ui): non-destructive pending boundary — compact spinner, 333ms threshold

* chore(lint): drop unused base58 import in near sandbox test

Author: elliotBraem

.changeset/non-destructive-pending-boundary.md

@@ -0,0 +1,5 @@
+---
+"everything-dev": patch
+---
+
+De-scale the router's default pending boundary so navigations no longer blank the page: the default pending component renders a compact centered spinner instead of a full-viewport "Loading..." takeover, and `defaultPendingMs` moves from 100ms to 333ms so brief navigations keep the previous page visible with the root progress bar carrying the signal. Pairs with the login route rendering instantly from the hydrated session cache instead of blocking on a session fetch.

packages/better-near-auth/src/near.sandbox.test.ts

@@ -1,4 +1,4 @@
-import { base58, base64, hex } from "@scure/base";
+import { base64, hex } from "@scure/base";
 import { getTestInstance } from "better-auth/test";
 import { generateKey, MlDsa65KeyPair, Near } from "near-kit";
 import { Sandbox } from "near-kit/sandbox";

packages/everything-dev/src/ui/router-client.tsx

@@ -66,10 +66,11 @@ export function createRouter<
     scrollRestoration: true,
     defaultStructuralSharing: true,
     defaultPreloadStaleTime: 0,
-    // Show the pending boundary fast (#683): the router's 1000ms default left
-    // cold authed navigations blank for up to a second, forcing every child
-    // to re-declare pendingMs.
-    defaultPendingMs: 100,
+    // Pending boundary at 333ms: brief navigations keep the previous page
+    // rendered with the root progress bar carrying the signal, and the
+    // compact spinner is reserved for genuinely slow or first loads — still
+    // well inside the 1000ms blank window #683 fixed.
+    defaultPendingMs: 333,
     defaultPendingMinMs: 0,
     defaultErrorComponent: RouterError,
     defaultNotFoundComponent,

packages/everything-dev/src/ui/router-defaults.tsx

@@ -19,11 +19,12 @@ export function defaultNotFoundComponent() {
 
 export function defaultPendingComponent() {
   return (
-    <div className="min-h-screen flex items-center justify-center bg-background px-6">
-      <div className="flex flex-col items-center gap-3" role="status" aria-live="polite">
-        <div className="h-6 w-6 animate-spin rounded-full border-2 border-border border-t-foreground" />
-        <p className="text-sm text-muted-foreground">Loading...</p>
-      </div>
+    <div
+      className="flex min-h-48 flex-1 items-center justify-center bg-background p-6"
+      role="status"
+      aria-live="polite"
+    >
+      <div className="h-6 w-6 animate-spin rounded-full border-2 border-border border-t-foreground" />
     </div>
   );
 }

packages/everything-dev/src/ui/router-server.tsx

@@ -105,8 +105,8 @@ export function createServerRouterModule<TRouteTree extends AnyRoute = AnyRoute>
       },
       defaultNotFoundComponent,
       defaultPendingComponent,
-      // Same fast-pending default as the client router (#683)
-      defaultPendingMs: 100,
+      // Same pending default as the client router
+      defaultPendingMs: 333,
       defaultPendingMinMs: 0,
       dehydrate: () => {
         if (typeof window === "undefined") {