diff --git a/src/app.tsx b/src/app.tsx
index 42da502..c1562d0 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -159,7 +159,19 @@ function AppLayout(props: { children: any }) {
 
   return (
     <>
-      <div class="flex max-w-screen flex-row">
+      <Show when={!barsInitialized()}>
+        <div class="bg-base fixed inset-0 z-100">
+          <TerminalSplash />
+        </div>
+      </Show>
+
+      <div
+        class="flex max-w-screen flex-row"
+        style={{
+          opacity: barsInitialized() ? "1" : "0",
+          transition: "opacity 0.3s ease-in-out"
+        }}
+      >
         <LeftBar />
         <div
           class="relative min-h-screen rounded-t-lg shadow-2xl"
@@ -168,7 +180,9 @@ function AppLayout(props: { children: any }) {
             "margin-left": `${leftBarSize()}px`
           }}
         >
-          <Suspense fallback={<TerminalSplash />}>{props.children}</Suspense>
+          <Show when={barsInitialized()} fallback={<TerminalSplash />}>
+            <Suspense fallback={<TerminalSplash />}>{props.children}</Suspense>
+          </Show>
         </div>
         <RightBar />
       </div>