perf(web): stop preview loading rerenders (#7561)

Author: Bil0000

apps/web/src/components/preview/PreviewChromeRow.test.tsx

@@ -9,7 +9,6 @@ describe("PreviewChromeRow", () => {
 <PreviewChromeRow
 url="https://example.com/dashboard?mode=edit&tab=1#notes"
 loading={false}
-loadProgress={0}
 canGoBack={false}
 canGoForward={false}
 refreshDisabled={false}

apps/web/src/components/preview/PreviewChromeRow.tsx

@@ -24,7 +24,6 @@ import { cn } from "~/lib/utils";
 interfaceProps{
 url: string;
 loading: boolean;
-loadProgress: number;
 canGoBack: boolean;
 canGoForward: boolean;
 refreshDisabled: boolean;
@@ -65,7 +64,6 @@ const NOOP = () => {};
 exportfunctionPreviewChromeRow({
  url,
  loading,
- loadProgress,
  canGoBack,
  canGoForward,
  refreshDisabled,
@@ -308,16 +306,12 @@ export function PreviewChromeRow({
 ) : null}
 {trailingActions}
 </form>
-{loadProgress>0 ? (
-<div
-aria-hidden
-className="pointer-events-none absolute bottom-0 left-0 z-10 h-0.5 rounded-r-full bg-primary transition-all duration-150 ease-out"
-style={{
-width: `${loadProgress}%`,
-boxShadow: "0 0 6px 1px var(--color-ring)",
-}}
-/>
-) : null}
+<div
+aria-hidden
+data-loading={loading}
+className="preview-loading-progress pointer-events-none absolute bottom-0 left-0 z-10 h-0.5 w-full origin-left rounded-r-full bg-primary"
+style={{boxShadow: "0 0 6px 1px var(--color-ring)"}}
+/>
 </div>
 );
 }

apps/web/src/components/preview/PreviewView.test.tsx

@@ -5,6 +5,7 @@ import {
 FILL_PREVIEW_VIEWPORT,
 ThreadId,
 }from"@t3tools/contracts";
+import{act,Profiler}from"react";
 import{renderToStaticMarkup}from"react-dom/server";
 import{beforeEach,describe,expect,it,vi}from"vite-plus/test";
 
@@ -30,6 +31,7 @@ const mocks = vi.hoisted(() => ({
 toggleAnnotation: nullas(()=>void)|null,
 pictureInPicture: false,
 showEmptyState: false,
+loading: false,
 recordVisitForThread: vi.fn(),
 }));
 
@@ -103,7 +105,7 @@ vi.mock("~/previewStateStore", () => ({
 hasWebContents: true,
 canGoBack: false,
 canGoForward: false,
-loading: false,
+loading: mocks.loading,
 zoomFactor: 1,
 pictureInPicture: mocks.pictureInPicture,
 colorScheme: "system",
@@ -244,7 +246,6 @@ vi.mock("./PreviewUnreachable", () => ({ PreviewUnreachable: () => null }));
 vi.mock("./ZoomIndicator",()=>({ZoomIndicator: ()=>null}));
 vi.mock("./AgentBrowserCursor",()=>({AgentBrowserCursor: ()=>null}));
 vi.mock("~/browser/BrowserSurfaceSlot",()=>({BrowserSurfaceSlot: ()=>null}));
-vi.mock("./useLoadingProgress",()=>({useLoadingProgress: ()=>0}));
 vi.mock("./usePreviewSession",()=>({usePreviewSession: vi.fn()}));
 
 import{PreviewView}from"./PreviewView";
@@ -256,6 +257,68 @@ const TEST_THREAD_REF = {
 }asconst;
 constTEST_RUNTIME_TAB_ID=previewRuntimeTabId(TEST_THREAD_REF,null,"tab-1");
 
+// ReactDOM needs a host, but this unit suite intentionally has no DOM dependency.
+classTestNode{
+parentNode: TestNode|null=null;
+childNodes: TestNode[]=[];
+readonlynodeName: string;
+readonlytagName: string;
+readonlynamespaceURI="http://www.w3.org/1999/xhtml";
+readonlystyle={};
+
+constructor(
+name: string,
+readonlyownerDocument: TestNode|null=null,
+readonlynodeType=1,
+){
+this.nodeName=name.toUpperCase();
+this.tagName=this.nodeName;
+}
+
+settextContent(_value: string){
+this.childNodes=[];
+}
+
+appendChild(child: TestNode){
+child.parentNode=this;
+this.childNodes.push(child);
+returnchild;
+}
+
+removeChild(child: TestNode){
+this.childNodes.splice(this.childNodes.indexOf(child),1);
+child.parentNode=null;
+returnchild;
+}
+
+createElement(name: string){
+returnnewTestNode(name,this);
+}
+
+addEventListener(){}
+removeEventListener(){}
+setAttribute(){}
+}
+
+functioninstallTestDom(){
+constdocument=newTestNode("#document",null,9);
+constwindow={
+ document,
+HTMLIFrameElement: TestNode,
+setInterval: globalThis.setInterval,
+clearInterval: globalThis.clearInterval,
+setTimeout: globalThis.setTimeout,
+clearTimeout: globalThis.clearTimeout,
+addEventListener(){},
+removeEventListener(){},
+};
+vi.stubGlobal("document",document);
+vi.stubGlobal("window",window);
+vi.stubGlobal("HTMLIFrameElement",window.HTMLIFrameElement);
+vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT",true);
+returndocument;
+}
+
 describe("PreviewView navigation",()=>{
 beforeEach(()=>{
 mocks.navigate.mockClear();
@@ -279,9 +342,38 @@ describe("PreviewView navigation", () => {
 mocks.toggleAnnotation=null;
 mocks.pictureInPicture=false;
 mocks.showEmptyState=false;
+mocks.loading=false;
 mocks.recordVisitForThread.mockClear();
 });
 
+it("does not rerender while loading time passes",async()=>{
+vi.useFakeTimers();
+mocks.loading=true;
+constdocument=installTestDom();
+const{ createRoot }=awaitimport("react-dom/client");
+constroot=createRoot(document.createElement("div")asunknownasElement);
+constonRender=vi.fn();
+
+try{
+awaitact(()=>{
+root.render(
+<Profilerid="preview"onRender={onRender}>
+<PreviewViewthreadRef={TEST_THREAD_REF}tabId="tab-1"visible/>
+</Profiler>,
+);
+});
+constinitialRenderCount=onRender.mock.calls.length;
+
+awaitact(()=>vi.advanceTimersByTimeAsync(1_000));
+
+expect(onRender).toHaveBeenCalledTimes(initialRenderCount);
+}finally{
+awaitact(()=>root.unmount());
+vi.useRealTimers();
+vi.unstubAllGlobals();
+}
+});
+
 it.each([
 [
 "https://localhost:8000/dashboard?mode=test#top",

apps/web/src/components/preview/PreviewView.tsx

@@ -50,7 +50,6 @@ import { revealInFileExplorerLabel } from "./fileExplorerLabel";
 import{shouldShowPreviewEmptyState}from"./previewEmptyStateLogic";
 import{BrowserSurfaceSlot}from"~/browser/BrowserSurfaceSlot";
 import{useBrowserSurfaceStore}from"~/browser/browserSurfaceStore";
-import{useLoadingProgress}from"./useLoadingProgress";
 import{usePreviewSession}from"./usePreviewSession";
 import{ZoomIndicator}from"./ZoomIndicator";
 import{AgentBrowserCursor}from"./AgentBrowserCursor";
@@ -142,7 +141,6 @@ export function PreviewView({
 constisUnreachable=navStatus._tag==="LoadFailed";
 constshowEmptyState=shouldShowPreviewEmptyState(snapshot);
 constcontroller=desktopOverlay?.controller??"none";
-constloadProgress=useLoadingProgress(loading);
 constviewport=snapshot?.viewport??FILL_PREVIEW_VIEWPORT;
 constbrowserDefaults=useBrowserDefaults();
 constpanelRect=useBrowserSurfaceStore((state)=>
@@ -661,7 +659,6 @@ export function PreviewView({
 <PreviewChromeRow
 url={url}
 loading={loading}
-loadProgress={loadProgress}
 canGoBack={canGoBack}
 canGoForward={canGoForward}
 refreshDisabled={refreshDisabled}

apps/web/src/components/preview/useLoadingProgress.ts

@@ -2357,3 +2357,38 @@ code {
 .ultrathink-chroma {
 animation: ultrathink-chroma-shift 10s linear infinite;
 }
+
+@keyframes preview-loading-progress {
+from {
+transform:scaleX(0.04);
+ }
+
+to {
+transform:scaleX(0.9);
+ }
+}
+
+.preview-loading-progress {
+opacity:0;
+transform:scaleX(1);
+transition:
+ transform 150ms ease-out,
+ opacity 150ms ease-out 220ms;
+}
+
+.preview-loading-progress[data-loading="true"] {
+opacity:1;
+animation: preview-loading-progress 5.3scubic-bezier(0.1,0.5,0.2,1) forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .preview-loading-progress,
+ .preview-loading-progress[data-loading="true"] {
+transition: none;
+animation: none;
+ }
+
+ .preview-loading-progress[data-loading="true"] {
+transform:scaleX(0.9);
+ }
+}

apps/web/src/index.css

@@ -9,7 +9,6 @@ describe("PreviewChromeRow", () => {
 <PreviewChromeRow
 url="https://example.com/dashboard?mode=edit&tab=1#notes"
 loading={false}
-loadProgress={0}
 canGoBack={false}
 canGoForward={false}
 refreshDisabled={false}

apps/web/src/components/preview/PreviewChromeRow.test.tsx

@@ -24,7 +24,6 @@ import { cn } from "~/lib/utils";
 interfaceProps{
 url: string;
 loading: boolean;
-loadProgress: number;
 canGoBack: boolean;
 canGoForward: boolean;
 refreshDisabled: boolean;
@@ -65,7 +64,6 @@ const NOOP = () => {};
 exportfunctionPreviewChromeRow({
  url,
  loading,
- loadProgress,
  canGoBack,
  canGoForward,
  refreshDisabled,
@@ -308,16 +306,12 @@ export function PreviewChromeRow({
 ) : null}
 {trailingActions}
 </form>
-{loadProgress>0 ? (
-<div
-aria-hidden
-className="pointer-events-none absolute bottom-0 left-0 z-10 h-0.5 rounded-r-full bg-primary transition-all duration-150 ease-out"
-style={{
-width: `${loadProgress}%`,
-boxShadow: "0 0 6px 1px var(--color-ring)",
-}}
-/>
-) : null}
+<div
+aria-hidden
+data-loading={loading}
+className="preview-loading-progress pointer-events-none absolute bottom-0 left-0 z-10 h-0.5 w-full origin-left rounded-r-full bg-primary"
+style={{boxShadow: "0 0 6px 1px var(--color-ring)"}}
+/>
 </div>
 );
 }

apps/web/src/components/preview/PreviewChromeRow.tsx

@@ -5,6 +5,7 @@ import {
 FILL_PREVIEW_VIEWPORT,
 ThreadId,
 }from"@t3tools/contracts";
+import{act,Profiler}from"react";
 import{renderToStaticMarkup}from"react-dom/server";
 import{beforeEach,describe,expect,it,vi}from"vite-plus/test";
 
@@ -30,6 +31,7 @@ const mocks = vi.hoisted(() => ({
 toggleAnnotation: nullas(()=>void)|null,
 pictureInPicture: false,
 showEmptyState: false,
+loading: false,
 recordVisitForThread: vi.fn(),
 }));
 
@@ -103,7 +105,7 @@ vi.mock("~/previewStateStore", () => ({
 hasWebContents: true,
 canGoBack: false,
 canGoForward: false,
-loading: false,
+loading: mocks.loading,
 zoomFactor: 1,
 pictureInPicture: mocks.pictureInPicture,
 colorScheme: "system",
@@ -244,7 +246,6 @@ vi.mock("./PreviewUnreachable", () => ({ PreviewUnreachable: () => null }));
 vi.mock("./ZoomIndicator",()=>({ZoomIndicator: ()=>null}));
 vi.mock("./AgentBrowserCursor",()=>({AgentBrowserCursor: ()=>null}));
 vi.mock("~/browser/BrowserSurfaceSlot",()=>({BrowserSurfaceSlot: ()=>null}));
-vi.mock("./useLoadingProgress",()=>({useLoadingProgress: ()=>0}));
 vi.mock("./usePreviewSession",()=>({usePreviewSession: vi.fn()}));
 
 import{PreviewView}from"./PreviewView";
@@ -256,6 +257,68 @@ const TEST_THREAD_REF = {
 }asconst;
 constTEST_RUNTIME_TAB_ID=previewRuntimeTabId(TEST_THREAD_REF,null,"tab-1");
 
+// ReactDOM needs a host, but this unit suite intentionally has no DOM dependency.
+classTestNode{
+parentNode: TestNode|null=null;
+childNodes: TestNode[]=[];
+readonlynodeName: string;
+readonlytagName: string;
+readonlynamespaceURI="http://www.w3.org/1999/xhtml";
+readonlystyle={};
+
+constructor(
+name: string,
+readonlyownerDocument: TestNode|null=null,
+readonlynodeType=1,
+){
+this.nodeName=name.toUpperCase();
+this.tagName=this.nodeName;
+}
+
+settextContent(_value: string){
+this.childNodes=[];
+}
+
+appendChild(child: TestNode){
+child.parentNode=this;
+this.childNodes.push(child);
+returnchild;
+}
+
+removeChild(child: TestNode){
+this.childNodes.splice(this.childNodes.indexOf(child),1);
+child.parentNode=null;
+returnchild;
+}
+
+createElement(name: string){
+returnnewTestNode(name,this);
+}
+
+addEventListener(){}
+removeEventListener(){}
+setAttribute(){}
+}
+
+functioninstallTestDom(){
+constdocument=newTestNode("#document",null,9);
+constwindow={
+ document,
+HTMLIFrameElement: TestNode,
+setInterval: globalThis.setInterval,
+clearInterval: globalThis.clearInterval,
+setTimeout: globalThis.setTimeout,
+clearTimeout: globalThis.clearTimeout,
+addEventListener(){},
+removeEventListener(){},
+};
+vi.stubGlobal("document",document);
+vi.stubGlobal("window",window);
+vi.stubGlobal("HTMLIFrameElement",window.HTMLIFrameElement);
+vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT",true);
+returndocument;
+}
+
 describe("PreviewView navigation",()=>{
 beforeEach(()=>{
 mocks.navigate.mockClear();
@@ -279,9 +342,38 @@ describe("PreviewView navigation", () => {
 mocks.toggleAnnotation=null;
 mocks.pictureInPicture=false;
 mocks.showEmptyState=false;
+mocks.loading=false;
 mocks.recordVisitForThread.mockClear();
 });
 
+it("does not rerender while loading time passes",async()=>{
+vi.useFakeTimers();
+mocks.loading=true;
+constdocument=installTestDom();
+const{ createRoot }=awaitimport("react-dom/client");
+constroot=createRoot(document.createElement("div")asunknownasElement);
+constonRender=vi.fn();
+
+try{
+awaitact(()=>{
+root.render(
+<Profilerid="preview"onRender={onRender}>
+<PreviewViewthreadRef={TEST_THREAD_REF}tabId="tab-1"visible/>
+</Profiler>,
+);
+});
+constinitialRenderCount=onRender.mock.calls.length;
+
+awaitact(()=>vi.advanceTimersByTimeAsync(1_000));
+
+expect(onRender).toHaveBeenCalledTimes(initialRenderCount);
+}finally{
+awaitact(()=>root.unmount());
+vi.useRealTimers();
+vi.unstubAllGlobals();
+}
+});
+
 it.each([
 [
 "https://localhost:8000/dashboard?mode=test#top",

apps/web/src/components/preview/PreviewView.test.tsx

@@ -50,7 +50,6 @@ import { revealInFileExplorerLabel } from "./fileExplorerLabel";
 import{shouldShowPreviewEmptyState}from"./previewEmptyStateLogic";
 import{BrowserSurfaceSlot}from"~/browser/BrowserSurfaceSlot";
 import{useBrowserSurfaceStore}from"~/browser/browserSurfaceStore";
-import{useLoadingProgress}from"./useLoadingProgress";
 import{usePreviewSession}from"./usePreviewSession";
 import{ZoomIndicator}from"./ZoomIndicator";
 import{AgentBrowserCursor}from"./AgentBrowserCursor";
@@ -142,7 +141,6 @@ export function PreviewView({
 constisUnreachable=navStatus._tag==="LoadFailed";
 constshowEmptyState=shouldShowPreviewEmptyState(snapshot);
 constcontroller=desktopOverlay?.controller??"none";
-constloadProgress=useLoadingProgress(loading);
 constviewport=snapshot?.viewport??FILL_PREVIEW_VIEWPORT;
 constbrowserDefaults=useBrowserDefaults();
 constpanelRect=useBrowserSurfaceStore((state)=>
@@ -661,7 +659,6 @@ export function PreviewView({
 <PreviewChromeRow
 url={url}
 loading={loading}
-loadProgress={loadProgress}
 canGoBack={canGoBack}
 canGoForward={canGoForward}
 refreshDisabled={refreshDisabled}

apps/web/src/components/preview/PreviewView.tsx

@@ -2357,3 +2357,38 @@ code {
 .ultrathink-chroma {
 animation: ultrathink-chroma-shift 10s linear infinite;
 }
+
+@keyframes preview-loading-progress {
+from {
+transform:scaleX(0.04);
+ }
+
+to {
+transform:scaleX(0.9);
+ }
+}
+
+.preview-loading-progress {
+opacity:0;
+transform:scaleX(1);
+transition:
+ transform 150ms ease-out,
+ opacity 150ms ease-out 220ms;
+}
+
+.preview-loading-progress[data-loading="true"] {
+opacity:1;
+animation: preview-loading-progress 5.3scubic-bezier(0.1,0.5,0.2,1) forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .preview-loading-progress,
+ .preview-loading-progress[data-loading="true"] {
+transition: none;
+animation: none;
+ }
+
+ .preview-loading-progress[data-loading="true"] {
+transform:scaleX(0.9);
+ }
+}

apps/web/src/components/preview/useLoadingProgress.ts

@@ -9,7 +9,6 @@ describe("PreviewChromeRow", () => {
 <PreviewChromeRow
 url="https://example.com/dashboard?mode=edit&tab=1#notes"
 loading={false}
-loadProgress={0}
 canGoBack={false}
 canGoForward={false}
 refreshDisabled={false}

apps/web/src/index.css

@@ -24,7 +24,6 @@ import { cn } from "~/lib/utils";
 interfaceProps{
 url: string;
 loading: boolean;
-loadProgress: number;
 canGoBack: boolean;
 canGoForward: boolean;
 refreshDisabled: boolean;
@@ -65,7 +64,6 @@ const NOOP = () => {};
 exportfunctionPreviewChromeRow({
  url,
  loading,
- loadProgress,
  canGoBack,
  canGoForward,
  refreshDisabled,
@@ -308,16 +306,12 @@ export function PreviewChromeRow({
 ) : null}
 {trailingActions}
 </form>
-{loadProgress>0 ? (
-<div
-aria-hidden
-className="pointer-events-none absolute bottom-0 left-0 z-10 h-0.5 rounded-r-full bg-primary transition-all duration-150 ease-out"
-style={{
-width: `${loadProgress}%`,
-boxShadow: "0 0 6px 1px var(--color-ring)",
-}}
-/>
-) : null}
+<div
+aria-hidden
+data-loading={loading}
+className="preview-loading-progress pointer-events-none absolute bottom-0 left-0 z-10 h-0.5 w-full origin-left rounded-r-full bg-primary"
+style={{boxShadow: "0 0 6px 1px var(--color-ring)"}}
+/>
 </div>
 );
 }

apps/web/src/components/preview/PreviewChromeRow.test.tsx

@@ -5,6 +5,7 @@ import {
 FILL_PREVIEW_VIEWPORT,
 ThreadId,
 }from"@t3tools/contracts";
+import{act,Profiler}from"react";
 import{renderToStaticMarkup}from"react-dom/server";
 import{beforeEach,describe,expect,it,vi}from"vite-plus/test";
 
@@ -30,6 +31,7 @@ const mocks = vi.hoisted(() => ({
 toggleAnnotation: nullas(()=>void)|null,
 pictureInPicture: false,
 showEmptyState: false,
+loading: false,
 recordVisitForThread: vi.fn(),
 }));
 
@@ -103,7 +105,7 @@ vi.mock("~/previewStateStore", () => ({
 hasWebContents: true,
 canGoBack: false,
 canGoForward: false,
-loading: false,
+loading: mocks.loading,
 zoomFactor: 1,
 pictureInPicture: mocks.pictureInPicture,
 colorScheme: "system",
@@ -244,7 +246,6 @@ vi.mock("./PreviewUnreachable", () => ({ PreviewUnreachable: () => null }));
 vi.mock("./ZoomIndicator",()=>({ZoomIndicator: ()=>null}));
 vi.mock("./AgentBrowserCursor",()=>({AgentBrowserCursor: ()=>null}));
 vi.mock("~/browser/BrowserSurfaceSlot",()=>({BrowserSurfaceSlot: ()=>null}));
-vi.mock("./useLoadingProgress",()=>({useLoadingProgress: ()=>0}));
 vi.mock("./usePreviewSession",()=>({usePreviewSession: vi.fn()}));
 
 import{PreviewView}from"./PreviewView";
@@ -256,6 +257,68 @@ const TEST_THREAD_REF = {
 }asconst;
 constTEST_RUNTIME_TAB_ID=previewRuntimeTabId(TEST_THREAD_REF,null,"tab-1");
 
+// ReactDOM needs a host, but this unit suite intentionally has no DOM dependency.
+classTestNode{
+parentNode: TestNode|null=null;
+childNodes: TestNode[]=[];
+readonlynodeName: string;
+readonlytagName: string;
+readonlynamespaceURI="http://www.w3.org/1999/xhtml";
+readonlystyle={};
+
+constructor(
+name: string,
+readonlyownerDocument: TestNode|null=null,
+readonlynodeType=1,
+){
+this.nodeName=name.toUpperCase();
+this.tagName=this.nodeName;
+}
+
+settextContent(_value: string){
+this.childNodes=[];
+}
+
+appendChild(child: TestNode){
+child.parentNode=this;
+this.childNodes.push(child);
+returnchild;
+}
+
+removeChild(child: TestNode){
+this.childNodes.splice(this.childNodes.indexOf(child),1);
+child.parentNode=null;
+returnchild;
+}
+
+createElement(name: string){
+returnnewTestNode(name,this);
+}
+
+addEventListener(){}
+removeEventListener(){}
+setAttribute(){}
+}
+
+functioninstallTestDom(){
+constdocument=newTestNode("#document",null,9);
+constwindow={
+ document,
+HTMLIFrameElement: TestNode,
+setInterval: globalThis.setInterval,
+clearInterval: globalThis.clearInterval,
+setTimeout: globalThis.setTimeout,
+clearTimeout: globalThis.clearTimeout,
+addEventListener(){},
+removeEventListener(){},
+};
+vi.stubGlobal("document",document);
+vi.stubGlobal("window",window);
+vi.stubGlobal("HTMLIFrameElement",window.HTMLIFrameElement);
+vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT",true);
+returndocument;
+}
+
 describe("PreviewView navigation",()=>{
 beforeEach(()=>{
 mocks.navigate.mockClear();
@@ -279,9 +342,38 @@ describe("PreviewView navigation", () => {
 mocks.toggleAnnotation=null;
 mocks.pictureInPicture=false;
 mocks.showEmptyState=false;
+mocks.loading=false;
 mocks.recordVisitForThread.mockClear();
 });
 
+it("does not rerender while loading time passes",async()=>{
+vi.useFakeTimers();
+mocks.loading=true;
+constdocument=installTestDom();
+const{ createRoot }=awaitimport("react-dom/client");
+constroot=createRoot(document.createElement("div")asunknownasElement);
+constonRender=vi.fn();
+
+try{
+awaitact(()=>{
+root.render(
+<Profilerid="preview"onRender={onRender}>
+<PreviewViewthreadRef={TEST_THREAD_REF}tabId="tab-1"visible/>
+</Profiler>,
+);
+});
+constinitialRenderCount=onRender.mock.calls.length;
+
+awaitact(()=>vi.advanceTimersByTimeAsync(1_000));
+
+expect(onRender).toHaveBeenCalledTimes(initialRenderCount);
+}finally{
+awaitact(()=>root.unmount());
+vi.useRealTimers();
+vi.unstubAllGlobals();
+}
+});
+
 it.each([
 [
 "https://localhost:8000/dashboard?mode=test#top",

apps/web/src/components/preview/PreviewChromeRow.tsx

@@ -50,7 +50,6 @@ import { revealInFileExplorerLabel } from "./fileExplorerLabel";
 import{shouldShowPreviewEmptyState}from"./previewEmptyStateLogic";
 import{BrowserSurfaceSlot}from"~/browser/BrowserSurfaceSlot";
 import{useBrowserSurfaceStore}from"~/browser/browserSurfaceStore";
-import{useLoadingProgress}from"./useLoadingProgress";
 import{usePreviewSession}from"./usePreviewSession";
 import{ZoomIndicator}from"./ZoomIndicator";
 import{AgentBrowserCursor}from"./AgentBrowserCursor";
@@ -142,7 +141,6 @@ export function PreviewView({
 constisUnreachable=navStatus._tag==="LoadFailed";
 constshowEmptyState=shouldShowPreviewEmptyState(snapshot);
 constcontroller=desktopOverlay?.controller??"none";
-constloadProgress=useLoadingProgress(loading);
 constviewport=snapshot?.viewport??FILL_PREVIEW_VIEWPORT;
 constbrowserDefaults=useBrowserDefaults();
 constpanelRect=useBrowserSurfaceStore((state)=>
@@ -661,7 +659,6 @@ export function PreviewView({
 <PreviewChromeRow
 url={url}
 loading={loading}
-loadProgress={loadProgress}
 canGoBack={canGoBack}
 canGoForward={canGoForward}
 refreshDisabled={refreshDisabled}

apps/web/src/components/preview/PreviewView.test.tsx

@@ -2357,3 +2357,38 @@ code {
 .ultrathink-chroma {
 animation: ultrathink-chroma-shift 10s linear infinite;
 }
+
+@keyframes preview-loading-progress {
+from {
+transform:scaleX(0.04);
+ }
+
+to {
+transform:scaleX(0.9);
+ }
+}
+
+.preview-loading-progress {
+opacity:0;
+transform:scaleX(1);
+transition:
+ transform 150ms ease-out,
+ opacity 150ms ease-out 220ms;
+}
+
+.preview-loading-progress[data-loading="true"] {
+opacity:1;
+animation: preview-loading-progress 5.3scubic-bezier(0.1,0.5,0.2,1) forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .preview-loading-progress,
+ .preview-loading-progress[data-loading="true"] {
+transition: none;
+animation: none;
+ }
+
+ .preview-loading-progress[data-loading="true"] {
+transform:scaleX(0.9);
+ }
+}

apps/web/src/components/preview/PreviewView.tsx

@@ -9,7 +9,6 @@ describe("PreviewChromeRow", () => {
 <PreviewChromeRow
 url="https://example.com/dashboard?mode=edit&tab=1#notes"
 loading={false}
-loadProgress={0}
 canGoBack={false}
 canGoForward={false}
 refreshDisabled={false}

apps/web/src/components/preview/useLoadingProgress.ts

@@ -24,7 +24,6 @@ import { cn } from "~/lib/utils";
 interfaceProps{
 url: string;
 loading: boolean;
-loadProgress: number;
 canGoBack: boolean;
 canGoForward: boolean;
 refreshDisabled: boolean;
@@ -65,7 +64,6 @@ const NOOP = () => {};
 exportfunctionPreviewChromeRow({
  url,
  loading,
- loadProgress,
  canGoBack,
  canGoForward,
  refreshDisabled,
@@ -308,16 +306,12 @@ export function PreviewChromeRow({
 ) : null}
 {trailingActions}
 </form>
-{loadProgress>0 ? (
-<div
-aria-hidden
-className="pointer-events-none absolute bottom-0 left-0 z-10 h-0.5 rounded-r-full bg-primary transition-all duration-150 ease-out"
-style={{
-width: `${loadProgress}%`,
-boxShadow: "0 0 6px 1px var(--color-ring)",
-}}
-/>
-) : null}
+<div
+aria-hidden
+data-loading={loading}
+className="preview-loading-progress pointer-events-none absolute bottom-0 left-0 z-10 h-0.5 w-full origin-left rounded-r-full bg-primary"
+style={{boxShadow: "0 0 6px 1px var(--color-ring)"}}
+/>
 </div>
 );
 }

apps/web/src/index.css

@@ -5,6 +5,7 @@ import {
 FILL_PREVIEW_VIEWPORT,
 ThreadId,
 }from"@t3tools/contracts";
+import{act,Profiler}from"react";
 import{renderToStaticMarkup}from"react-dom/server";
 import{beforeEach,describe,expect,it,vi}from"vite-plus/test";
 
@@ -30,6 +31,7 @@ const mocks = vi.hoisted(() => ({
 toggleAnnotation: nullas(()=>void)|null,
 pictureInPicture: false,
 showEmptyState: false,
+loading: false,
 recordVisitForThread: vi.fn(),
 }));
 
@@ -103,7 +105,7 @@ vi.mock("~/previewStateStore", () => ({
 hasWebContents: true,
 canGoBack: false,
 canGoForward: false,
-loading: false,
+loading: mocks.loading,
 zoomFactor: 1,
 pictureInPicture: mocks.pictureInPicture,
 colorScheme: "system",
@@ -244,7 +246,6 @@ vi.mock("./PreviewUnreachable", () => ({ PreviewUnreachable: () => null }));
 vi.mock("./ZoomIndicator",()=>({ZoomIndicator: ()=>null}));
 vi.mock("./AgentBrowserCursor",()=>({AgentBrowserCursor: ()=>null}));
 vi.mock("~/browser/BrowserSurfaceSlot",()=>({BrowserSurfaceSlot: ()=>null}));
-vi.mock("./useLoadingProgress",()=>({useLoadingProgress: ()=>0}));
 vi.mock("./usePreviewSession",()=>({usePreviewSession: vi.fn()}));
 
 import{PreviewView}from"./PreviewView";
@@ -256,6 +257,68 @@ const TEST_THREAD_REF = {
 }asconst;
 constTEST_RUNTIME_TAB_ID=previewRuntimeTabId(TEST_THREAD_REF,null,"tab-1");
 
+// ReactDOM needs a host, but this unit suite intentionally has no DOM dependency.
+classTestNode{
+parentNode: TestNode|null=null;
+childNodes: TestNode[]=[];
+readonlynodeName: string;
+readonlytagName: string;
+readonlynamespaceURI="http://www.w3.org/1999/xhtml";
+readonlystyle={};
+
+constructor(
+name: string,
+readonlyownerDocument: TestNode|null=null,
+readonlynodeType=1,
+){
+this.nodeName=name.toUpperCase();
+this.tagName=this.nodeName;
+}
+
+settextContent(_value: string){
+this.childNodes=[];
+}
+
+appendChild(child: TestNode){
+child.parentNode=this;
+this.childNodes.push(child);
+returnchild;
+}
+
+removeChild(child: TestNode){
+this.childNodes.splice(this.childNodes.indexOf(child),1);
+child.parentNode=null;
+returnchild;
+}
+
+createElement(name: string){
+returnnewTestNode(name,this);
+}
+
+addEventListener(){}
+removeEventListener(){}
+setAttribute(){}
+}
+
+functioninstallTestDom(){
+constdocument=newTestNode("#document",null,9);
+constwindow={
+ document,
+HTMLIFrameElement: TestNode,
+setInterval: globalThis.setInterval,
+clearInterval: globalThis.clearInterval,
+setTimeout: globalThis.setTimeout,
+clearTimeout: globalThis.clearTimeout,
+addEventListener(){},
+removeEventListener(){},
+};
+vi.stubGlobal("document",document);
+vi.stubGlobal("window",window);
+vi.stubGlobal("HTMLIFrameElement",window.HTMLIFrameElement);
+vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT",true);
+returndocument;
+}
+
 describe("PreviewView navigation",()=>{
 beforeEach(()=>{
 mocks.navigate.mockClear();
@@ -279,9 +342,38 @@ describe("PreviewView navigation", () => {
 mocks.toggleAnnotation=null;
 mocks.pictureInPicture=false;
 mocks.showEmptyState=false;
+mocks.loading=false;
 mocks.recordVisitForThread.mockClear();
 });
 
+it("does not rerender while loading time passes",async()=>{
+vi.useFakeTimers();
+mocks.loading=true;
+constdocument=installTestDom();
+const{ createRoot }=awaitimport("react-dom/client");
+constroot=createRoot(document.createElement("div")asunknownasElement);
+constonRender=vi.fn();
+
+try{
+awaitact(()=>{
+root.render(
+<Profilerid="preview"onRender={onRender}>
+<PreviewViewthreadRef={TEST_THREAD_REF}tabId="tab-1"visible/>
+</Profiler>,
+);
+});
+constinitialRenderCount=onRender.mock.calls.length;
+
+awaitact(()=>vi.advanceTimersByTimeAsync(1_000));
+
+expect(onRender).toHaveBeenCalledTimes(initialRenderCount);
+}finally{
+awaitact(()=>root.unmount());
+vi.useRealTimers();
+vi.unstubAllGlobals();
+}
+});
+
 it.each([
 [
 "https://localhost:8000/dashboard?mode=test#top",

apps/web/src/components/preview/PreviewChromeRow.test.tsx

@@ -50,7 +50,6 @@ import { revealInFileExplorerLabel } from "./fileExplorerLabel";
 import{shouldShowPreviewEmptyState}from"./previewEmptyStateLogic";
 import{BrowserSurfaceSlot}from"~/browser/BrowserSurfaceSlot";
 import{useBrowserSurfaceStore}from"~/browser/browserSurfaceStore";
-import{useLoadingProgress}from"./useLoadingProgress";
 import{usePreviewSession}from"./usePreviewSession";
 import{ZoomIndicator}from"./ZoomIndicator";
 import{AgentBrowserCursor}from"./AgentBrowserCursor";
@@ -142,7 +141,6 @@ export function PreviewView({
 constisUnreachable=navStatus._tag==="LoadFailed";
 constshowEmptyState=shouldShowPreviewEmptyState(snapshot);
 constcontroller=desktopOverlay?.controller??"none";
-constloadProgress=useLoadingProgress(loading);
 constviewport=snapshot?.viewport??FILL_PREVIEW_VIEWPORT;
 constbrowserDefaults=useBrowserDefaults();
 constpanelRect=useBrowserSurfaceStore((state)=>
@@ -661,7 +659,6 @@ export function PreviewView({
 <PreviewChromeRow
 url={url}
 loading={loading}
-loadProgress={loadProgress}
 canGoBack={canGoBack}
 canGoForward={canGoForward}
 refreshDisabled={refreshDisabled}

apps/web/src/components/preview/PreviewChromeRow.tsx

@@ -2357,3 +2357,38 @@ code {
 .ultrathink-chroma {
 animation: ultrathink-chroma-shift 10s linear infinite;
 }
+
+@keyframes preview-loading-progress {
+from {
+transform:scaleX(0.04);
+ }
+
+to {
+transform:scaleX(0.9);
+ }
+}
+
+.preview-loading-progress {
+opacity:0;
+transform:scaleX(1);
+transition:
+ transform 150ms ease-out,
+ opacity 150ms ease-out 220ms;
+}
+
+.preview-loading-progress[data-loading="true"] {
+opacity:1;
+animation: preview-loading-progress 5.3scubic-bezier(0.1,0.5,0.2,1) forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .preview-loading-progress,
+ .preview-loading-progress[data-loading="true"] {
+transition: none;
+animation: none;
+ }
+
+ .preview-loading-progress[data-loading="true"] {
+transform:scaleX(0.9);
+ }
+}

apps/web/src/components/preview/PreviewView.test.tsx

@@ -9,7 +9,6 @@ describe("PreviewChromeRow", () => {
 <PreviewChromeRow
 url="https://example.com/dashboard?mode=edit&tab=1#notes"
 loading={false}
-loadProgress={0}
 canGoBack={false}
 canGoForward={false}
 refreshDisabled={false}

apps/web/src/components/preview/PreviewView.tsx

@@ -24,7 +24,6 @@ import { cn } from "~/lib/utils";
 interfaceProps{
 url: string;
 loading: boolean;
-loadProgress: number;
 canGoBack: boolean;
 canGoForward: boolean;
 refreshDisabled: boolean;
@@ -65,7 +64,6 @@ const NOOP = () => {};
 exportfunctionPreviewChromeRow({
  url,
  loading,
- loadProgress,
  canGoBack,
  canGoForward,
  refreshDisabled,
@@ -308,16 +306,12 @@ export function PreviewChromeRow({
 ) : null}
 {trailingActions}
 </form>
-{loadProgress>0 ? (
-<div
-aria-hidden
-className="pointer-events-none absolute bottom-0 left-0 z-10 h-0.5 rounded-r-full bg-primary transition-all duration-150 ease-out"
-style={{
-width: `${loadProgress}%`,
-boxShadow: "0 0 6px 1px var(--color-ring)",
-}}
-/>
-) : null}
+<div
+aria-hidden
+data-loading={loading}
+className="preview-loading-progress pointer-events-none absolute bottom-0 left-0 z-10 h-0.5 w-full origin-left rounded-r-full bg-primary"
+style={{boxShadow: "0 0 6px 1px var(--color-ring)"}}
+/>
 </div>
 );
 }

apps/web/src/components/preview/useLoadingProgress.ts

@@ -5,6 +5,7 @@ import {
 FILL_PREVIEW_VIEWPORT,
 ThreadId,
 }from"@t3tools/contracts";
+import{act,Profiler}from"react";
 import{renderToStaticMarkup}from"react-dom/server";
 import{beforeEach,describe,expect,it,vi}from"vite-plus/test";
 
@@ -30,6 +31,7 @@ const mocks = vi.hoisted(() => ({
 toggleAnnotation: nullas(()=>void)|null,
 pictureInPicture: false,
 showEmptyState: false,
+loading: false,
 recordVisitForThread: vi.fn(),
 }));
 
@@ -103,7 +105,7 @@ vi.mock("~/previewStateStore", () => ({
 hasWebContents: true,
 canGoBack: false,
 canGoForward: false,
-loading: false,
+loading: mocks.loading,
 zoomFactor: 1,
 pictureInPicture: mocks.pictureInPicture,
 colorScheme: "system",
@@ -244,7 +246,6 @@ vi.mock("./PreviewUnreachable", () => ({ PreviewUnreachable: () => null }));
 vi.mock("./ZoomIndicator",()=>({ZoomIndicator: ()=>null}));
 vi.mock("./AgentBrowserCursor",()=>({AgentBrowserCursor: ()=>null}));
 vi.mock("~/browser/BrowserSurfaceSlot",()=>({BrowserSurfaceSlot: ()=>null}));
-vi.mock("./useLoadingProgress",()=>({useLoadingProgress: ()=>0}));
 vi.mock("./usePreviewSession",()=>({usePreviewSession: vi.fn()}));
 
 import{PreviewView}from"./PreviewView";
@@ -256,6 +257,68 @@ const TEST_THREAD_REF = {
 }asconst;
 constTEST_RUNTIME_TAB_ID=previewRuntimeTabId(TEST_THREAD_REF,null,"tab-1");
 
+// ReactDOM needs a host, but this unit suite intentionally has no DOM dependency.
+classTestNode{
+parentNode: TestNode|null=null;
+childNodes: TestNode[]=[];
+readonlynodeName: string;
+readonlytagName: string;
+readonlynamespaceURI="http://www.w3.org/1999/xhtml";
+readonlystyle={};
+
+constructor(
+name: string,
+readonlyownerDocument: TestNode|null=null,
+readonlynodeType=1,
+){
+this.nodeName=name.toUpperCase();
+this.tagName=this.nodeName;
+}
+
+settextContent(_value: string){
+this.childNodes=[];
+}
+
+appendChild(child: TestNode){
+child.parentNode=this;
+this.childNodes.push(child);
+returnchild;
+}
+
+removeChild(child: TestNode){
+this.childNodes.splice(this.childNodes.indexOf(child),1);
+child.parentNode=null;
+returnchild;
+}
+
+createElement(name: string){
+returnnewTestNode(name,this);
+}
+
+addEventListener(){}
+removeEventListener(){}
+setAttribute(){}
+}
+
+functioninstallTestDom(){
+constdocument=newTestNode("#document",null,9);
+constwindow={
+ document,
+HTMLIFrameElement: TestNode,
+setInterval: globalThis.setInterval,
+clearInterval: globalThis.clearInterval,
+setTimeout: globalThis.setTimeout,
+clearTimeout: globalThis.clearTimeout,
+addEventListener(){},
+removeEventListener(){},
+};
+vi.stubGlobal("document",document);
+vi.stubGlobal("window",window);
+vi.stubGlobal("HTMLIFrameElement",window.HTMLIFrameElement);
+vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT",true);
+returndocument;
+}
+
 describe("PreviewView navigation",()=>{
 beforeEach(()=>{
 mocks.navigate.mockClear();
@@ -279,9 +342,38 @@ describe("PreviewView navigation", () => {
 mocks.toggleAnnotation=null;
 mocks.pictureInPicture=false;
 mocks.showEmptyState=false;
+mocks.loading=false;
 mocks.recordVisitForThread.mockClear();
 });
 
+it("does not rerender while loading time passes",async()=>{
+vi.useFakeTimers();
+mocks.loading=true;
+constdocument=installTestDom();
+const{ createRoot }=awaitimport("react-dom/client");
+constroot=createRoot(document.createElement("div")asunknownasElement);
+constonRender=vi.fn();
+
+try{
+awaitact(()=>{
+root.render(
+<Profilerid="preview"onRender={onRender}>
+<PreviewViewthreadRef={TEST_THREAD_REF}tabId="tab-1"visible/>
+</Profiler>,
+);
+});
+constinitialRenderCount=onRender.mock.calls.length;
+
+awaitact(()=>vi.advanceTimersByTimeAsync(1_000));
+
+expect(onRender).toHaveBeenCalledTimes(initialRenderCount);
+}finally{
+awaitact(()=>root.unmount());
+vi.useRealTimers();
+vi.unstubAllGlobals();
+}
+});
+
 it.each([
 [
 "https://localhost:8000/dashboard?mode=test#top",

apps/web/src/index.css

@@ -50,7 +50,6 @@ import { revealInFileExplorerLabel } from "./fileExplorerLabel";
 import{shouldShowPreviewEmptyState}from"./previewEmptyStateLogic";
 import{BrowserSurfaceSlot}from"~/browser/BrowserSurfaceSlot";
 import{useBrowserSurfaceStore}from"~/browser/browserSurfaceStore";
-import{useLoadingProgress}from"./useLoadingProgress";
 import{usePreviewSession}from"./usePreviewSession";
 import{ZoomIndicator}from"./ZoomIndicator";
 import{AgentBrowserCursor}from"./AgentBrowserCursor";
@@ -142,7 +141,6 @@ export function PreviewView({
 constisUnreachable=navStatus._tag==="LoadFailed";
 constshowEmptyState=shouldShowPreviewEmptyState(snapshot);
 constcontroller=desktopOverlay?.controller??"none";
-constloadProgress=useLoadingProgress(loading);
 constviewport=snapshot?.viewport??FILL_PREVIEW_VIEWPORT;
 constbrowserDefaults=useBrowserDefaults();
 constpanelRect=useBrowserSurfaceStore((state)=>
@@ -661,7 +659,6 @@ export function PreviewView({
 <PreviewChromeRow
 url={url}
 loading={loading}
-loadProgress={loadProgress}
 canGoBack={canGoBack}
 canGoForward={canGoForward}
 refreshDisabled={refreshDisabled}

apps/web/src/components/preview/PreviewChromeRow.test.tsx

@@ -2357,3 +2357,38 @@ code {
 .ultrathink-chroma {
 animation: ultrathink-chroma-shift 10s linear infinite;
 }
+
+@keyframes preview-loading-progress {
+from {
+transform:scaleX(0.04);
+ }
+
+to {
+transform:scaleX(0.9);
+ }
+}
+
+.preview-loading-progress {
+opacity:0;
+transform:scaleX(1);
+transition:
+ transform 150ms ease-out,
+ opacity 150ms ease-out 220ms;
+}
+
+.preview-loading-progress[data-loading="true"] {
+opacity:1;
+animation: preview-loading-progress 5.3scubic-bezier(0.1,0.5,0.2,1) forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .preview-loading-progress,
+ .preview-loading-progress[data-loading="true"] {
+transition: none;
+animation: none;
+ }
+
+ .preview-loading-progress[data-loading="true"] {
+transform:scaleX(0.9);
+ }
+}

apps/web/src/components/preview/PreviewChromeRow.tsx

@@ -9,7 +9,6 @@ describe("PreviewChromeRow", () => {
 <PreviewChromeRow
 url="https://example.com/dashboard?mode=edit&tab=1#notes"
 loading={false}
-loadProgress={0}
 canGoBack={false}
 canGoForward={false}
 refreshDisabled={false}

apps/web/src/components/preview/PreviewView.test.tsx

@@ -24,7 +24,6 @@ import { cn } from "~/lib/utils";
 interfaceProps{
 url: string;
 loading: boolean;
-loadProgress: number;
 canGoBack: boolean;
 canGoForward: boolean;
 refreshDisabled: boolean;
@@ -65,7 +64,6 @@ const NOOP = () => {};
 exportfunctionPreviewChromeRow({
  url,
  loading,
- loadProgress,
  canGoBack,
  canGoForward,
  refreshDisabled,
@@ -308,16 +306,12 @@ export function PreviewChromeRow({
 ) : null}
 {trailingActions}
 </form>
-{loadProgress>0 ? (
-<div
-aria-hidden
-className="pointer-events-none absolute bottom-0 left-0 z-10 h-0.5 rounded-r-full bg-primary transition-all duration-150 ease-out"
-style={{
-width: `${loadProgress}%`,
-boxShadow: "0 0 6px 1px var(--color-ring)",
-}}
-/>
-) : null}
+<div
+aria-hidden
+data-loading={loading}
+className="preview-loading-progress pointer-events-none absolute bottom-0 left-0 z-10 h-0.5 w-full origin-left rounded-r-full bg-primary"
+style={{boxShadow: "0 0 6px 1px var(--color-ring)"}}
+/>
 </div>
 );
 }

apps/web/src/components/preview/PreviewView.tsx

@@ -5,6 +5,7 @@ import {
 FILL_PREVIEW_VIEWPORT,
 ThreadId,
 }from"@t3tools/contracts";
+import{act,Profiler}from"react";
 import{renderToStaticMarkup}from"react-dom/server";
 import{beforeEach,describe,expect,it,vi}from"vite-plus/test";
 
@@ -30,6 +31,7 @@ const mocks = vi.hoisted(() => ({
 toggleAnnotation: nullas(()=>void)|null,
 pictureInPicture: false,
 showEmptyState: false,
+loading: false,
 recordVisitForThread: vi.fn(),
 }));
 
@@ -103,7 +105,7 @@ vi.mock("~/previewStateStore", () => ({
 hasWebContents: true,
 canGoBack: false,
 canGoForward: false,
-loading: false,
+loading: mocks.loading,
 zoomFactor: 1,
 pictureInPicture: mocks.pictureInPicture,
 colorScheme: "system",
@@ -244,7 +246,6 @@ vi.mock("./PreviewUnreachable", () => ({ PreviewUnreachable: () => null }));
 vi.mock("./ZoomIndicator",()=>({ZoomIndicator: ()=>null}));
 vi.mock("./AgentBrowserCursor",()=>({AgentBrowserCursor: ()=>null}));
 vi.mock("~/browser/BrowserSurfaceSlot",()=>({BrowserSurfaceSlot: ()=>null}));
-vi.mock("./useLoadingProgress",()=>({useLoadingProgress: ()=>0}));
 vi.mock("./usePreviewSession",()=>({usePreviewSession: vi.fn()}));
 
 import{PreviewView}from"./PreviewView";
@@ -256,6 +257,68 @@ const TEST_THREAD_REF = {
 }asconst;
 constTEST_RUNTIME_TAB_ID=previewRuntimeTabId(TEST_THREAD_REF,null,"tab-1");
 
+// ReactDOM needs a host, but this unit suite intentionally has no DOM dependency.
+classTestNode{
+parentNode: TestNode|null=null;
+childNodes: TestNode[]=[];
+readonlynodeName: string;
+readonlytagName: string;
+readonlynamespaceURI="http://www.w3.org/1999/xhtml";
+readonlystyle={};
+
+constructor(
+name: string,
+readonlyownerDocument: TestNode|null=null,
+readonlynodeType=1,
+){
+this.nodeName=name.toUpperCase();
+this.tagName=this.nodeName;
+}
+
+settextContent(_value: string){
+this.childNodes=[];
+}
+
+appendChild(child: TestNode){
+child.parentNode=this;
+this.childNodes.push(child);
+returnchild;
+}
+
+removeChild(child: TestNode){
+this.childNodes.splice(this.childNodes.indexOf(child),1);
+child.parentNode=null;
+returnchild;
+}
+
+createElement(name: string){
+returnnewTestNode(name,this);
+}
+
+addEventListener(){}
+removeEventListener(){}
+setAttribute(){}
+}
+
+functioninstallTestDom(){
+constdocument=newTestNode("#document",null,9);
+constwindow={
+ document,
+HTMLIFrameElement: TestNode,
+setInterval: globalThis.setInterval,
+clearInterval: globalThis.clearInterval,
+setTimeout: globalThis.setTimeout,
+clearTimeout: globalThis.clearTimeout,
+addEventListener(){},
+removeEventListener(){},
+};
+vi.stubGlobal("document",document);
+vi.stubGlobal("window",window);
+vi.stubGlobal("HTMLIFrameElement",window.HTMLIFrameElement);
+vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT",true);
+returndocument;
+}
+
 describe("PreviewView navigation",()=>{
 beforeEach(()=>{
 mocks.navigate.mockClear();
@@ -279,9 +342,38 @@ describe("PreviewView navigation", () => {
 mocks.toggleAnnotation=null;
 mocks.pictureInPicture=false;
 mocks.showEmptyState=false;
+mocks.loading=false;
 mocks.recordVisitForThread.mockClear();
 });
 
+it("does not rerender while loading time passes",async()=>{
+vi.useFakeTimers();
+mocks.loading=true;
+constdocument=installTestDom();
+const{ createRoot }=awaitimport("react-dom/client");
+constroot=createRoot(document.createElement("div")asunknownasElement);
+constonRender=vi.fn();
+
+try{
+awaitact(()=>{
+root.render(
+<Profilerid="preview"onRender={onRender}>
+<PreviewViewthreadRef={TEST_THREAD_REF}tabId="tab-1"visible/>
+</Profiler>,
+);
+});
+constinitialRenderCount=onRender.mock.calls.length;
+
+awaitact(()=>vi.advanceTimersByTimeAsync(1_000));
+
+expect(onRender).toHaveBeenCalledTimes(initialRenderCount);
+}finally{
+awaitact(()=>root.unmount());
+vi.useRealTimers();
+vi.unstubAllGlobals();
+}
+});
+
 it.each([
 [
 "https://localhost:8000/dashboard?mode=test#top",

apps/web/src/components/preview/useLoadingProgress.ts

@@ -50,7 +50,6 @@ import { revealInFileExplorerLabel } from "./fileExplorerLabel";
 import{shouldShowPreviewEmptyState}from"./previewEmptyStateLogic";
 import{BrowserSurfaceSlot}from"~/browser/BrowserSurfaceSlot";
 import{useBrowserSurfaceStore}from"~/browser/browserSurfaceStore";
-import{useLoadingProgress}from"./useLoadingProgress";
 import{usePreviewSession}from"./usePreviewSession";
 import{ZoomIndicator}from"./ZoomIndicator";
 import{AgentBrowserCursor}from"./AgentBrowserCursor";
@@ -142,7 +141,6 @@ export function PreviewView({
 constisUnreachable=navStatus._tag==="LoadFailed";
 constshowEmptyState=shouldShowPreviewEmptyState(snapshot);
 constcontroller=desktopOverlay?.controller??"none";
-constloadProgress=useLoadingProgress(loading);
 constviewport=snapshot?.viewport??FILL_PREVIEW_VIEWPORT;
 constbrowserDefaults=useBrowserDefaults();
 constpanelRect=useBrowserSurfaceStore((state)=>
@@ -661,7 +659,6 @@ export function PreviewView({
 <PreviewChromeRow
 url={url}
 loading={loading}
-loadProgress={loadProgress}
 canGoBack={canGoBack}
 canGoForward={canGoForward}
 refreshDisabled={refreshDisabled}

apps/web/src/index.css

@@ -2357,3 +2357,38 @@ code {
 .ultrathink-chroma {
 animation: ultrathink-chroma-shift 10s linear infinite;
 }
+
+@keyframes preview-loading-progress {
+from {
+transform:scaleX(0.04);
+ }
+
+to {
+transform:scaleX(0.9);
+ }
+}
+
+.preview-loading-progress {
+opacity:0;
+transform:scaleX(1);
+transition:
+ transform 150ms ease-out,
+ opacity 150ms ease-out 220ms;
+}
+
+.preview-loading-progress[data-loading="true"] {
+opacity:1;
+animation: preview-loading-progress 5.3scubic-bezier(0.1,0.5,0.2,1) forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .preview-loading-progress,
+ .preview-loading-progress[data-loading="true"] {
+transition: none;
+animation: none;
+ }
+
+ .preview-loading-progress[data-loading="true"] {
+transform:scaleX(0.9);
+ }
+}

apps/web/src/components/preview/PreviewChromeRow.test.tsx

@@ -9,7 +9,6 @@ describe("PreviewChromeRow", () => {
 <PreviewChromeRow
 url="https://example.com/dashboard?mode=edit&tab=1#notes"
 loading={false}
-loadProgress={0}
 canGoBack={false}
 canGoForward={false}
 refreshDisabled={false}

apps/web/src/components/preview/PreviewChromeRow.tsx

@@ -24,7 +24,6 @@ import { cn } from "~/lib/utils";
 interfaceProps{
 url: string;
 loading: boolean;
-loadProgress: number;
 canGoBack: boolean;
 canGoForward: boolean;
 refreshDisabled: boolean;
@@ -65,7 +64,6 @@ const NOOP = () => {};
 exportfunctionPreviewChromeRow({
  url,
  loading,
- loadProgress,
  canGoBack,
  canGoForward,
  refreshDisabled,
@@ -308,16 +306,12 @@ export function PreviewChromeRow({
 ) : null}
 {trailingActions}
 </form>
-{loadProgress>0 ? (
-<div
-aria-hidden
-className="pointer-events-none absolute bottom-0 left-0 z-10 h-0.5 rounded-r-full bg-primary transition-all duration-150 ease-out"
-style={{
-width: `${loadProgress}%`,
-boxShadow: "0 0 6px 1px var(--color-ring)",
-}}
-/>
-) : null}
+<div
+aria-hidden
+data-loading={loading}
+className="preview-loading-progress pointer-events-none absolute bottom-0 left-0 z-10 h-0.5 w-full origin-left rounded-r-full bg-primary"
+style={{boxShadow: "0 0 6px 1px var(--color-ring)"}}
+/>
 </div>
 );
 }

apps/web/src/components/preview/PreviewView.test.tsx

@@ -5,6 +5,7 @@ import {
 FILL_PREVIEW_VIEWPORT,
 ThreadId,
 }from"@t3tools/contracts";
+import{act,Profiler}from"react";
 import{renderToStaticMarkup}from"react-dom/server";
 import{beforeEach,describe,expect,it,vi}from"vite-plus/test";
 
@@ -30,6 +31,7 @@ const mocks = vi.hoisted(() => ({
 toggleAnnotation: nullas(()=>void)|null,
 pictureInPicture: false,
 showEmptyState: false,
+loading: false,
 recordVisitForThread: vi.fn(),
 }));
 
@@ -103,7 +105,7 @@ vi.mock("~/previewStateStore", () => ({
 hasWebContents: true,
 canGoBack: false,
 canGoForward: false,
-loading: false,
+loading: mocks.loading,
 zoomFactor: 1,
 pictureInPicture: mocks.pictureInPicture,
 colorScheme: "system",
@@ -244,7 +246,6 @@ vi.mock("./PreviewUnreachable", () => ({ PreviewUnreachable: () => null }));
 vi.mock("./ZoomIndicator",()=>({ZoomIndicator: ()=>null}));
 vi.mock("./AgentBrowserCursor",()=>({AgentBrowserCursor: ()=>null}));
 vi.mock("~/browser/BrowserSurfaceSlot",()=>({BrowserSurfaceSlot: ()=>null}));
-vi.mock("./useLoadingProgress",()=>({useLoadingProgress: ()=>0}));
 vi.mock("./usePreviewSession",()=>({usePreviewSession: vi.fn()}));
 
 import{PreviewView}from"./PreviewView";
@@ -256,6 +257,68 @@ const TEST_THREAD_REF = {
 }asconst;
 constTEST_RUNTIME_TAB_ID=previewRuntimeTabId(TEST_THREAD_REF,null,"tab-1");
 
+// ReactDOM needs a host, but this unit suite intentionally has no DOM dependency.
+classTestNode{
+parentNode: TestNode|null=null;
+childNodes: TestNode[]=[];
+readonlynodeName: string;
+readonlytagName: string;
+readonlynamespaceURI="http://www.w3.org/1999/xhtml";
+readonlystyle={};
+
+constructor(
+name: string,
+readonlyownerDocument: TestNode|null=null,
+readonlynodeType=1,
+){
+this.nodeName=name.toUpperCase();
+this.tagName=this.nodeName;
+}
+
+settextContent(_value: string){
+this.childNodes=[];
+}
+
+appendChild(child: TestNode){
+child.parentNode=this;
+this.childNodes.push(child);
+returnchild;
+}
+
+removeChild(child: TestNode){
+this.childNodes.splice(this.childNodes.indexOf(child),1);
+child.parentNode=null;
+returnchild;
+}
+
+createElement(name: string){
+returnnewTestNode(name,this);
+}
+
+addEventListener(){}
+removeEventListener(){}
+setAttribute(){}
+}
+
+functioninstallTestDom(){
+constdocument=newTestNode("#document",null,9);
+constwindow={
+ document,
+HTMLIFrameElement: TestNode,
+setInterval: globalThis.setInterval,
+clearInterval: globalThis.clearInterval,
+setTimeout: globalThis.setTimeout,
+clearTimeout: globalThis.clearTimeout,
+addEventListener(){},
+removeEventListener(){},
+};
+vi.stubGlobal("document",document);
+vi.stubGlobal("window",window);
+vi.stubGlobal("HTMLIFrameElement",window.HTMLIFrameElement);
+vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT",true);
+returndocument;
+}
+
 describe("PreviewView navigation",()=>{
 beforeEach(()=>{
 mocks.navigate.mockClear();
@@ -279,9 +342,38 @@ describe("PreviewView navigation", () => {
 mocks.toggleAnnotation=null;
 mocks.pictureInPicture=false;
 mocks.showEmptyState=false;
+mocks.loading=false;
 mocks.recordVisitForThread.mockClear();
 });
 
+it("does not rerender while loading time passes",async()=>{
+vi.useFakeTimers();
+mocks.loading=true;
+constdocument=installTestDom();
+const{ createRoot }=awaitimport("react-dom/client");
+constroot=createRoot(document.createElement("div")asunknownasElement);
+constonRender=vi.fn();
+
+try{
+awaitact(()=>{
+root.render(
+<Profilerid="preview"onRender={onRender}>
+<PreviewViewthreadRef={TEST_THREAD_REF}tabId="tab-1"visible/>
+</Profiler>,
+);
+});
+constinitialRenderCount=onRender.mock.calls.length;
+
+awaitact(()=>vi.advanceTimersByTimeAsync(1_000));
+
+expect(onRender).toHaveBeenCalledTimes(initialRenderCount);
+}finally{
+awaitact(()=>root.unmount());
+vi.useRealTimers();
+vi.unstubAllGlobals();
+}
+});
+
 it.each([
 [
 "https://localhost:8000/dashboard?mode=test#top",

apps/web/src/components/preview/PreviewView.tsx

@@ -50,7 +50,6 @@ import { revealInFileExplorerLabel } from "./fileExplorerLabel";
 import{shouldShowPreviewEmptyState}from"./previewEmptyStateLogic";
 import{BrowserSurfaceSlot}from"~/browser/BrowserSurfaceSlot";
 import{useBrowserSurfaceStore}from"~/browser/browserSurfaceStore";
-import{useLoadingProgress}from"./useLoadingProgress";
 import{usePreviewSession}from"./usePreviewSession";
 import{ZoomIndicator}from"./ZoomIndicator";
 import{AgentBrowserCursor}from"./AgentBrowserCursor";
@@ -142,7 +141,6 @@ export function PreviewView({
 constisUnreachable=navStatus._tag==="LoadFailed";
 constshowEmptyState=shouldShowPreviewEmptyState(snapshot);
 constcontroller=desktopOverlay?.controller??"none";
-constloadProgress=useLoadingProgress(loading);
 constviewport=snapshot?.viewport??FILL_PREVIEW_VIEWPORT;
 constbrowserDefaults=useBrowserDefaults();
 constpanelRect=useBrowserSurfaceStore((state)=>
@@ -661,7 +659,6 @@ export function PreviewView({
 <PreviewChromeRow
 url={url}
 loading={loading}
-loadProgress={loadProgress}
 canGoBack={canGoBack}
 canGoForward={canGoForward}
 refreshDisabled={refreshDisabled}

apps/web/src/components/preview/useLoadingProgress.ts

@@ -2357,3 +2357,38 @@ code {
 .ultrathink-chroma {
 animation: ultrathink-chroma-shift 10s linear infinite;
 }
+
+@keyframes preview-loading-progress {
+from {
+transform:scaleX(0.04);
+ }
+
+to {
+transform:scaleX(0.9);
+ }
+}
+
+.preview-loading-progress {
+opacity:0;
+transform:scaleX(1);
+transition:
+ transform 150ms ease-out,
+ opacity 150ms ease-out 220ms;
+}
+
+.preview-loading-progress[data-loading="true"] {
+opacity:1;
+animation: preview-loading-progress 5.3scubic-bezier(0.1,0.5,0.2,1) forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .preview-loading-progress,
+ .preview-loading-progress[data-loading="true"] {
+transition: none;
+animation: none;
+ }
+
+ .preview-loading-progress[data-loading="true"] {
+transform:scaleX(0.9);
+ }
+}

apps/web/src/index.css

@@ -9,7 +9,6 @@ describe("PreviewChromeRow", () => {
 <PreviewChromeRow
 url="https://example.com/dashboard?mode=edit&tab=1#notes"
 loading={false}
-loadProgress={0}
 canGoBack={false}
 canGoForward={false}
 refreshDisabled={false}

apps/web/src/components/preview/PreviewChromeRow.test.tsx

@@ -24,7 +24,6 @@ import { cn } from "~/lib/utils";
 interfaceProps{
 url: string;
 loading: boolean;
-loadProgress: number;
 canGoBack: boolean;
 canGoForward: boolean;
 refreshDisabled: boolean;
@@ -65,7 +64,6 @@ const NOOP = () => {};
 exportfunctionPreviewChromeRow({
  url,
  loading,
- loadProgress,
  canGoBack,
  canGoForward,
  refreshDisabled,
@@ -308,16 +306,12 @@ export function PreviewChromeRow({
 ) : null}
 {trailingActions}
 </form>
-{loadProgress>0 ? (
-<div
-aria-hidden
-className="pointer-events-none absolute bottom-0 left-0 z-10 h-0.5 rounded-r-full bg-primary transition-all duration-150 ease-out"
-style={{
-width: `${loadProgress}%`,
-boxShadow: "0 0 6px 1px var(--color-ring)",
-}}
-/>
-) : null}
+<div
+aria-hidden
+data-loading={loading}
+className="preview-loading-progress pointer-events-none absolute bottom-0 left-0 z-10 h-0.5 w-full origin-left rounded-r-full bg-primary"
+style={{boxShadow: "0 0 6px 1px var(--color-ring)"}}
+/>
 </div>
 );
 }

apps/web/src/components/preview/PreviewChromeRow.tsx

@@ -5,6 +5,7 @@ import {
 FILL_PREVIEW_VIEWPORT,
 ThreadId,
 }from"@t3tools/contracts";
+import{act,Profiler}from"react";
 import{renderToStaticMarkup}from"react-dom/server";
 import{beforeEach,describe,expect,it,vi}from"vite-plus/test";
 
@@ -30,6 +31,7 @@ const mocks = vi.hoisted(() => ({
 toggleAnnotation: nullas(()=>void)|null,
 pictureInPicture: false,
 showEmptyState: false,
+loading: false,
 recordVisitForThread: vi.fn(),
 }));
 
@@ -103,7 +105,7 @@ vi.mock("~/previewStateStore", () => ({
 hasWebContents: true,
 canGoBack: false,
 canGoForward: false,
-loading: false,
+loading: mocks.loading,
 zoomFactor: 1,
 pictureInPicture: mocks.pictureInPicture,
 colorScheme: "system",
@@ -244,7 +246,6 @@ vi.mock("./PreviewUnreachable", () => ({ PreviewUnreachable: () => null }));
 vi.mock("./ZoomIndicator",()=>({ZoomIndicator: ()=>null}));
 vi.mock("./AgentBrowserCursor",()=>({AgentBrowserCursor: ()=>null}));
 vi.mock("~/browser/BrowserSurfaceSlot",()=>({BrowserSurfaceSlot: ()=>null}));
-vi.mock("./useLoadingProgress",()=>({useLoadingProgress: ()=>0}));
 vi.mock("./usePreviewSession",()=>({usePreviewSession: vi.fn()}));
 
 import{PreviewView}from"./PreviewView";
@@ -256,6 +257,68 @@ const TEST_THREAD_REF = {
 }asconst;
 constTEST_RUNTIME_TAB_ID=previewRuntimeTabId(TEST_THREAD_REF,null,"tab-1");
 
+// ReactDOM needs a host, but this unit suite intentionally has no DOM dependency.
+classTestNode{
+parentNode: TestNode|null=null;
+childNodes: TestNode[]=[];
+readonlynodeName: string;
+readonlytagName: string;
+readonlynamespaceURI="http://www.w3.org/1999/xhtml";
+readonlystyle={};
+
+constructor(
+name: string,
+readonlyownerDocument: TestNode|null=null,
+readonlynodeType=1,
+){
+this.nodeName=name.toUpperCase();
+this.tagName=this.nodeName;
+}
+
+settextContent(_value: string){
+this.childNodes=[];
+}
+
+appendChild(child: TestNode){
+child.parentNode=this;
+this.childNodes.push(child);
+returnchild;
+}
+
+removeChild(child: TestNode){
+this.childNodes.splice(this.childNodes.indexOf(child),1);
+child.parentNode=null;
+returnchild;
+}
+
+createElement(name: string){
+returnnewTestNode(name,this);
+}
+
+addEventListener(){}
+removeEventListener(){}
+setAttribute(){}
+}
+
+functioninstallTestDom(){
+constdocument=newTestNode("#document",null,9);
+constwindow={
+ document,
+HTMLIFrameElement: TestNode,
+setInterval: globalThis.setInterval,
+clearInterval: globalThis.clearInterval,
+setTimeout: globalThis.setTimeout,
+clearTimeout: globalThis.clearTimeout,
+addEventListener(){},
+removeEventListener(){},
+};
+vi.stubGlobal("document",document);
+vi.stubGlobal("window",window);
+vi.stubGlobal("HTMLIFrameElement",window.HTMLIFrameElement);
+vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT",true);
+returndocument;
+}
+
 describe("PreviewView navigation",()=>{
 beforeEach(()=>{
 mocks.navigate.mockClear();
@@ -279,9 +342,38 @@ describe("PreviewView navigation", () => {
 mocks.toggleAnnotation=null;
 mocks.pictureInPicture=false;
 mocks.showEmptyState=false;
+mocks.loading=false;
 mocks.recordVisitForThread.mockClear();
 });
 
+it("does not rerender while loading time passes",async()=>{
+vi.useFakeTimers();
+mocks.loading=true;
+constdocument=installTestDom();
+const{ createRoot }=awaitimport("react-dom/client");
+constroot=createRoot(document.createElement("div")asunknownasElement);
+constonRender=vi.fn();
+
+try{
+awaitact(()=>{
+root.render(
+<Profilerid="preview"onRender={onRender}>
+<PreviewViewthreadRef={TEST_THREAD_REF}tabId="tab-1"visible/>
+</Profiler>,
+);
+});
+constinitialRenderCount=onRender.mock.calls.length;
+
+awaitact(()=>vi.advanceTimersByTimeAsync(1_000));
+
+expect(onRender).toHaveBeenCalledTimes(initialRenderCount);
+}finally{
+awaitact(()=>root.unmount());
+vi.useRealTimers();
+vi.unstubAllGlobals();
+}
+});
+
 it.each([
 [
 "https://localhost:8000/dashboard?mode=test#top",

apps/web/src/components/preview/PreviewView.test.tsx

@@ -50,7 +50,6 @@ import { revealInFileExplorerLabel } from "./fileExplorerLabel";
 import{shouldShowPreviewEmptyState}from"./previewEmptyStateLogic";
 import{BrowserSurfaceSlot}from"~/browser/BrowserSurfaceSlot";
 import{useBrowserSurfaceStore}from"~/browser/browserSurfaceStore";
-import{useLoadingProgress}from"./useLoadingProgress";
 import{usePreviewSession}from"./usePreviewSession";
 import{ZoomIndicator}from"./ZoomIndicator";
 import{AgentBrowserCursor}from"./AgentBrowserCursor";
@@ -142,7 +141,6 @@ export function PreviewView({
 constisUnreachable=navStatus._tag==="LoadFailed";
 constshowEmptyState=shouldShowPreviewEmptyState(snapshot);
 constcontroller=desktopOverlay?.controller??"none";
-constloadProgress=useLoadingProgress(loading);
 constviewport=snapshot?.viewport??FILL_PREVIEW_VIEWPORT;
 constbrowserDefaults=useBrowserDefaults();
 constpanelRect=useBrowserSurfaceStore((state)=>
@@ -661,7 +659,6 @@ export function PreviewView({
 <PreviewChromeRow
 url={url}
 loading={loading}
-loadProgress={loadProgress}
 canGoBack={canGoBack}
 canGoForward={canGoForward}
 refreshDisabled={refreshDisabled}

apps/web/src/components/preview/PreviewView.tsx

@@ -2357,3 +2357,38 @@ code {
 .ultrathink-chroma {
 animation: ultrathink-chroma-shift 10s linear infinite;
 }
+
+@keyframes preview-loading-progress {
+from {
+transform:scaleX(0.04);
+ }
+
+to {
+transform:scaleX(0.9);
+ }
+}
+
+.preview-loading-progress {
+opacity:0;
+transform:scaleX(1);
+transition:
+ transform 150ms ease-out,
+ opacity 150ms ease-out 220ms;
+}
+
+.preview-loading-progress[data-loading="true"] {
+opacity:1;
+animation: preview-loading-progress 5.3scubic-bezier(0.1,0.5,0.2,1) forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .preview-loading-progress,
+ .preview-loading-progress[data-loading="true"] {
+transition: none;
+animation: none;
+ }
+
+ .preview-loading-progress[data-loading="true"] {
+transform:scaleX(0.9);
+ }
+}