From 32a8e7059d57992ee7c0c8dac5ca5203d533113d Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Fri, 14 Aug 2026 13:38:45 -0700
Subject: [PATCH] Fix workflow editor loading flash

Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 desktop/src/app/routes/lazyWorkflowsRouteScreen.ts | 6 ++++++
 desktop/src/app/routes/workflows.$workflowId.tsx   | 8 ++------
 desktop/src/app/routes/workflows.tsx               | 8 ++------
 3 files changed, 10 insertions(+), 12 deletions(-)
 create mode 100644 desktop/src/app/routes/lazyWorkflowsRouteScreen.ts

diff --git a/desktop/src/app/routes/lazyWorkflowsRouteScreen.ts b/desktop/src/app/routes/lazyWorkflowsRouteScreen.ts
new file mode 100644
index 000000000..8def7e650
--- /dev/null
+++ b/desktop/src/app/routes/lazyWorkflowsRouteScreen.ts
@@ -0,0 +1,6 @@
+import * as React from "react";
+
+export const LazyWorkflowsRouteScreen = React.lazy(async () => {
+  const module = await import("./WorkflowsRouteScreen");
+  return { default: module.WorkflowsRouteScreen };
+});
diff --git a/desktop/src/app/routes/workflows.$workflowId.tsx b/desktop/src/app/routes/workflows.$workflowId.tsx
index 393cffcbb..4b4999922 100644
--- a/desktop/src/app/routes/workflows.$workflowId.tsx
+++ b/desktop/src/app/routes/workflows.$workflowId.tsx
@@ -7,6 +7,7 @@ import {
 } from "@/features/workflows/ui/workflowEditorPane";
 import { usePreviewFeatureWarning } from "@/shared/features";
 import { ViewLoadingFallback } from "@/shared/ui/ViewLoadingFallback";
+import { LazyWorkflowsRouteScreen } from "./lazyWorkflowsRouteScreen";
 
 export const Route = createFileRoute("/workflows/$workflowId")({
   component: WorkflowEditorRouteComponent,
@@ -16,11 +17,6 @@ export const Route = createFileRoute("/workflows/$workflowId")({
   }),
 });
 
-const WorkflowsRouteScreen = React.lazy(async () => {
-  const module = await import("./WorkflowsRouteScreen");
-  return { default: module.WorkflowsRouteScreen };
-});
-
 function WorkflowEditorRouteComponent() {
   usePreviewFeatureWarning("workflows");
   const navigate = Route.useNavigate();
@@ -29,7 +25,7 @@ function WorkflowEditorRouteComponent() {
 
   return (
     <React.Suspense fallback={<ViewLoadingFallback kind="workflows" />}>
-      <WorkflowsRouteScreen
+      <LazyWorkflowsRouteScreen
         editor={{
           mode: view === "duplicate" ? "duplicate" : "edit",
           pane: parseWorkflowEditorPane(pane),
diff --git a/desktop/src/app/routes/workflows.tsx b/desktop/src/app/routes/workflows.tsx
index 95a95bb87..cbd9fa478 100644
--- a/desktop/src/app/routes/workflows.tsx
+++ b/desktop/src/app/routes/workflows.tsx
@@ -7,6 +7,7 @@ import {
 } from "@/features/workflows/ui/workflowEditorPane";
 import { usePreviewFeatureWarning } from "@/shared/features";
 import { ViewLoadingFallback } from "@/shared/ui/ViewLoadingFallback";
+import { LazyWorkflowsRouteScreen } from "./lazyWorkflowsRouteScreen";
 
 export const Route = createFileRoute("/workflows")({
   component: WorkflowsRouteComponent,
@@ -16,11 +17,6 @@ export const Route = createFileRoute("/workflows")({
   }),
 });
 
-const WorkflowsRouteScreen = React.lazy(async () => {
-  const module = await import("./WorkflowsRouteScreen");
-  return { default: module.WorkflowsRouteScreen };
-});
-
 function WorkflowsRouteComponent() {
   usePreviewFeatureWarning("workflows");
   const navigate = Route.useNavigate();
@@ -28,7 +24,7 @@ function WorkflowsRouteComponent() {
 
   return (
     <React.Suspense fallback={<ViewLoadingFallback kind="workflows" />}>
-      <WorkflowsRouteScreen
+      <LazyWorkflowsRouteScreen
         editor={
           view === "create"
             ? { mode: "create", pane: parseWorkflowEditorPane(pane) }