Merge pull request #10865 from Kilo-Org/linen-dracorex

feat(cli): add animated console loading screens

.changeset/console-loading-logo.md

@@ -0,0 +1,5 @@
+---
+"@kilocode/cli": patch
+---
+
+Show the animated Kilo logo while the console and dashboard finish loading.

bun.lock

@@ -85,6 +85,7 @@
       "dependencies": {
         "@kilocode/kilo-web-ui": "workspace:*",
         "@kilocode/sdk": "workspace:*",
+        "@lottiefiles/dotlottie-web": "0.74.0",
         "@opencode-ai/ui": "workspace:*",
         "@solidjs/router": "catalog:",
         "ghostty-web": "0.4.0",
@@ -1354,6 +1355,8 @@
 
     "@leichtgewicht/ip-codec": ["@leichtgewicht/ip-codec@2.0.5", "", {}, "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw=="],
 
+    "@lottiefiles/dotlottie-web": ["@lottiefiles/dotlottie-web@0.74.0", "", {}, "sha512-rG12+dJSVhQDdleGr9epR7zU/UJ6hh8jzBDHAurClHP5t5dSrOh3eP3UCFxolpVPcobaRVYsBnYg4HQokQewpg=="],
+
     "@lukeed/ms": ["@lukeed/ms@2.0.2", "", {}, "sha512-9I2Zn6+NJLfaGoz9jN3lpwDgAYvfGeNYdbAIjJOqzs4Tpc+VU3Jqq4IofSUBKajiDS8k9fZIg18/z13mpk1bsA=="],
 
     "@lydell/node-pty": ["@lydell/node-pty@1.2.0-beta.10", "", { "optionalDependencies": { "@lydell/node-pty-darwin-arm64": "1.2.0-beta.10", "@lydell/node-pty-darwin-x64": "1.2.0-beta.10", "@lydell/node-pty-linux-arm64": "1.2.0-beta.10", "@lydell/node-pty-linux-x64": "1.2.0-beta.10", "@lydell/node-pty-win32-arm64": "1.2.0-beta.10", "@lydell/node-pty-win32-x64": "1.2.0-beta.10" } }, "sha512-Fv+A3+MZVA8qhkBIZsM1E6dCdHNMyXXz22mAYiMWd03LlyK///F3OH6CKPX9mj4id7LUlxpr45yPzyBVy9aDPw=="],

packages/kilo-console/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@kilocode/kilo-web-ui": "workspace:*",
     "@kilocode/sdk": "workspace:*",
+    "@lottiefiles/dotlottie-web": "0.74.0",
     "@opencode-ai/ui": "workspace:*",
     "@solidjs/router": "catalog:",
     "ghostty-web": "0.4.0",

packages/kilo-console/src/components/LoadingLogo.tsx

@@ -0,0 +1,34 @@
+import { DotLottie } from "@lottiefiles/dotlottie-web"
+import { onCleanup, onMount } from "solid-js"
+
+const src = `${import.meta.env.BASE_URL}logo.lottie`
+
+export function LoadingLogo(props: { class?: string }) {
+  let canvas: HTMLCanvasElement | undefined
+
+  onMount(() => {
+    if (!canvas) return
+
+    const motion = !window.matchMedia("(prefers-reduced-motion: reduce)").matches
+    const player = new DotLottie({
+      autoplay: motion,
+      canvas,
+      loop: motion,
+      src,
+      renderConfig: {
+        autoResize: true,
+      },
+    })
+
+    onCleanup(() => player.destroy())
+  })
+
+  return (
+    <canvas
+      ref={(node) => (canvas = node)}
+      class={`console-loading-logo${props.class ? ` ${props.class}` : ""}`}
+      role="img"
+      aria-label="Kilo loading animation"
+    />
+  )
+}

packages/kilo-console/src/components/LoadingScreen.tsx

@@ -0,0 +1,20 @@
+import { LoadingLogo } from "./LoadingLogo"
+
+type Variant = "fullscreen" | "content"
+
+export function LoadingScreen(props: { variant: Variant }) {
+  return (
+    <section
+      class="console-loading"
+      classList={{
+        "console-loading-fullscreen": props.variant === "fullscreen",
+        "console-loading-content": props.variant === "content",
+      }}
+      role="status"
+      aria-live="polite"
+      aria-label="Loading Kilo Console"
+    >
+      <LoadingLogo />
+    </section>
+  )
+}

packages/kilo-console/src/layouts/ConfigLayout.tsx

@@ -1,6 +1,7 @@
 import { Show } from "solid-js"
 import type { JSX } from "solid-js"
 import { Card } from "@kilocode/kilo-web-ui/card"
+import { LoadingScreen } from "../components/LoadingScreen"
 import { ConfigProvider } from "../context/ConfigProvider"
 import { useConfig } from "../context/config"
 import { ConfigSidebar } from "../routes/config/ConfigSidebar"
@@ -43,9 +44,7 @@ function ConfigContent(props: { children?: JSX.Element }) {
           </Card>
         </Show>
         <Show when={ctx.data.loading && !ctx.data()}>
-          <Card class="banner" variant="info">
-            Loading dashboard data...
-          </Card>
+          <LoadingScreen variant="content" />
         </Show>
         {props.children}
       </section>

packages/kilo-console/src/routes/projects/ProjectConsoleRoute.tsx

@@ -2,6 +2,7 @@ import { A, useLocation, useParams } from "@solidjs/router"
 import { createEffect, createMemo, createResource, createSignal, For, onCleanup, Show } from "solid-js"
 import { Card } from "@kilocode/kilo-web-ui/card"
 import { Icon } from "@kilocode/kilo-web-ui/icon"
+import { LoadingScreen } from "../../components/LoadingScreen"
 import {
   createProjectPty,
   createProjectWorktree,
@@ -677,14 +678,10 @@ export function ProjectConsoleRoute() {
 
       <main class="project-console-main">
         <Show when={!query() && discoverable(search())}>
-          <Card class="banner" variant="info">
-            Discovering Kilo server...
-          </Card>
+          <LoadingScreen variant="fullscreen" />
         </Show>
         <Show when={snap.loading && !snap()}>
-          <Card class="banner" variant="info">
-            Loading project console...
-          </Card>
+          <LoadingScreen variant="fullscreen" />
         </Show>
         <Show when={snap.error || failure()}>
           <Card class="banner" variant="error">

packages/kilo-console/src/routes/projects/ProjectsRoute.tsx

@@ -2,6 +2,7 @@ import { createEffect, createMemo, createResource, createSignal, For, Show } fro
 import { A } from "@solidjs/router"
 import { Card } from "@kilocode/kilo-web-ui/card"
 import { SearchField } from "../../components/SearchField"
+import { LoadingScreen } from "../../components/LoadingScreen"
 import {
   discover,
   forgetCached,
@@ -131,15 +132,11 @@ export function ProjectsRoute() {
         </header>
 
         <Show when={!query() && discoverable()}>
-          <Card class="banner" variant="info">
-            Discovering Kilo server...
-          </Card>
+          <LoadingScreen variant="fullscreen" />
         </Show>
 
         <Show when={items.loading && !items()}>
-          <Card class="banner" variant="info">
-            Loading projects...
-          </Card>
+          <LoadingScreen variant="fullscreen" />
         </Show>
 
         <Show when={items.error}>

packages/kilo-console/src/styles.css

@@ -1,4 +1,5 @@
 @import "./styles/base.css";
+@import "./styles/loading.css";
 @import "./styles/config.css";
 @import "./styles/cli-ui.css";
 @import "./styles/resolved.css";

packages/kilo-console/src/styles/loading.css

@@ -0,0 +1,46 @@
+.console-loading {
+  display: grid;
+  place-items: center;
+  background: var(--background);
+}
+
+.console-loading-fullscreen {
+  position: fixed;
+  z-index: 1000;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+.kilo-console .content {
+  position: relative;
+}
+
+.kilo-console .content > .console-loading-content {
+  position: absolute;
+  z-index: 10;
+  inset: 0;
+}
+
+.console-loading-logo {
+  display: block;
+  width: min(10rem, 28vw);
+  height: auto;
+  aspect-ratio: 1;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.console-loading-fullscreen .console-loading-logo {
+  width: min(13rem, 31vw);
+}
+
+@media (max-width: 560px) {
+  .console-loading-logo {
+    width: min(8rem, 34vw);
+  }
+
+  .console-loading-fullscreen .console-loading-logo {
+    width: min(10rem, 36vw);
+  }
+}