fix(app): black screen on launch with sidecar server

Author: adamdotdevin

packages/desktop/src/index.tsx

@@ -472,12 +472,10 @@ render(() => {
             }
 
             return (
-              <Show when={defaultServer.loading ? false : defaultServer.latest}>
-                {(defaultServer) => (
-                  <AppInterface defaultServer={defaultServer() ?? ServerConnection.key(server)} servers={[server]}>
-                    <Inner />
-                  </AppInterface>
-                )}
+              <Show when={!defaultServer.loading}>
+                <AppInterface defaultServer={defaultServer.latest ?? ServerConnection.key(server)} servers={[server]}>
+                  <Inner />
+                </AppInterface>
               </Show>
             )
           }}
@@ -492,19 +490,34 @@ type ServerReadyData = { url: string; password: string | null }
 // Gate component that waits for the server to be ready
 function ServerGate(props: { children: (data: Accessor<ServerReadyData>) => JSX.Element }) {
   const [serverData] = createResource(() => commands.awaitInitialization(new Channel<InitStep>() as any))
-  if (serverData.state === "errored") throw serverData.error
 
   return (
     <Show
-      when={serverData.state !== "pending" && serverData()}
+      when={serverData.state !== "errored"}
       fallback={
-        <div class="h-screen w-screen flex flex-col items-center justify-center bg-background-base">
-          <Splash class="w-16 h-20 opacity-50 animate-pulse" />
+        <div class="h-screen w-screen flex flex-col items-center justify-center bg-background-base gap-4">
+          <Splash class="w-16 h-20 opacity-50" />
+          <div class="max-w-md px-4 text-center">
+            <p class="text-sm font-medium text-red-400">Failed to start server</p>
+            <p class="mt-2 text-xs text-zinc-400 break-words whitespace-pre-wrap">
+              {String(serverData.error ?? "Unknown error")}
+            </p>
+          </div>
           <div data-tauri-decorum-tb class="flex flex-row absolute top-0 right-0 z-10 h-10" />
         </div>
       }
     >
-      {(data) => props.children(data)}
+      <Show
+        when={serverData.state !== "pending" && serverData()}
+        fallback={
+          <div class="h-screen w-screen flex flex-col items-center justify-center bg-background-base">
+            <Splash class="w-16 h-20 opacity-50 animate-pulse" />
+            <div data-tauri-decorum-tb class="flex flex-row absolute top-0 right-0 z-10 h-10" />
+          </div>
+        }
+      >
+        {(data) => props.children(data)}
+      </Show>
     </Show>
   )
 }