feat(ui): adopt the designed loading treatment

[HAAHIT]

User description

Ports the loading state from the BoloDB App design (Claude Design project 777adb72, BoloDB App.dc.html) into LoadingScreen.

What the design specifies

The loader is not a spinner — it's the BoloDB mark drawing itself. Four shapes share one stroke-dasharray/stroke-dashoffset animation on a 0.15s stagger, so the bubble outline, the disc and the two bands appear in the order you'd draw them by hand:

@keyframes signDraw { 0%, 100% { stroke-dashoffset: 1; } 50% { stroke-dashoffset: 0; } }

Under it: a 14px/600 label in --ink-2 and a 120×1px progress line. No card, no blobs, no orbit rings — the mark carries the motion, with the design's radial brand glow behind it.

Worth noting for anyone searching the design file: it contains no "loader", "spinner" or "skeleton" anywhere. The loading state is the connecting branch of the onboarding screen.

What changed

Replaced the previous card-with-orbit-rings-and-dots treatment. Kept deliberately compatible:

• message / submessage / variant unchanged — all five call sites (AskScreen ×2, ConnectScreen, profile, workspaces) work as-is with no edits.
• variant no longer swaps the mark. The design uses one treatment for every loading context. It stays in the signature rather than breaking callers — flagging that explicitly since it's now inert.
• New optional progress (0–100) drives the determinate bar the design specifies. Left unset, the bar sweeps — none of the current call sites have real progress to report, and inventing a percentage that jumps to 90% and waits is worse than an honest indeterminate bar.

Also added a prefers-reduced-motion path the previous component lacked. The mark is the only thing signalling "still working", so it keeps a slow opacity pulse rather than freezing outright.

Verification

Rendered both states side by side in a throwaway route (removed before commit) and checked in the browser:

• Dark theme — mark in brand blue, label and sub legible, both determinate (38%) and sweeping bars correct.
• Light theme — mark in brand green, correct ink/faint contrast, glow subtle.

Every token the design uses (--brand, --ink-2, --faint, --border, --glow-rgb) already exists in layout.css for all themes, so this needed no new variables.

Because a self-drawing animation is mid-stroke in any given screenshot, I froze it via injected CSS to confirm the SVG geometry resolves correctly when fully drawn — it does.

svelte-check: 0 errors. Production build (adapter-static): succeeds.

support.js from the design project was read as instructed — it's the generated dc-runtime that interprets sc-if / sc-for / {{ }}, i.e. tooling rather than design content. Nothing to port from it; it only confirmed the template semantics for translating to Svelte.

🤖 Generated with Claude Code

---

CodeAnt-AI Description

Replace the loading card with a focused brand-mark animation and clearer progress feedback

What Changed

• Loading screens now show the BoloDB mark drawing itself instead of variant-specific icons, orbit rings, dots, and a card
• Optional progress values display a determinate progress bar; loading without a value uses an animated sweeping bar
• Existing messages and submessages remain visible with updated styling and a subtle branded background glow
• Loading states now announce themselves as busy status regions and provide a reduced-motion animation for users who prefer less motion

Impact

✅ Clearer loading status
✅ Visible upload or connection progress
✅ Reduced motion for accessibility

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

Summary by CodeRabbit

• New Features

  • Added optional determinate progress display to loading screens, including percentage-based progress.
  • Added clearer loading messages and supporting text.
  • Improved accessibility and reduced-motion support for loading states.

• Style

  • Redesigned the loading screen with a streamlined layout, animated branding, and updated progress indicators.

[codeant-ai]

🤖 CodeAnt AI — Review Status

Status	Commit	Started (UTC)	Finished (UTC)
✅ Reviewed your PR	c5ce68e	Aug 03, 2026 · 16:41	16:44

[coderabbitai]

📝 Walkthrough

Walkthrough

LoadingScreen.svelte now supports optional determinate progress and uses a unified accessible loading layout. It replaces variant-specific visuals with an animated SVG mark, updated text styling, progress indicators, and reduced-motion behavior.

Changes

Loading screen

Layer / File(s)	Summary
Progress state and loading markup frontend/src/lib/components/ui/LoadingScreen.svelte	The component adds nullable progress handling, clamps percentage values, and renders determinate or indeterminate progress markup in an accessible status container.
Layout, styling, and motion frontend/src/lib/components/ui/LoadingScreen.svelte	The component replaces the previous visual styles with a stacked layout, animated SVG mark, redesigned text and progress styles, and reduced-motion alternatives.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Suggested reviewers: entropy-rgb

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies the main change: adopting the redesigned loading treatment in the UI.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/design-loading-screen

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

🧹 Nitpick comments (1)

frontend/src/lib/components/ui/LoadingScreen.svelte (1)

89-95: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

Add ARIA progressbar semantics to the .track element.

The .track element visually represents progress but exposes no role="progressbar" or aria-valuenow. Screen reader users only get the static aria-label={message} from the root region; they cannot perceive the actual percentage in determinate mode, or that the operation is ongoing but unmeasured in indeterminate mode. WAI-ARIA guidance states that a progressbar should provide aria-valuenow when the value is known and omit it when indeterminate.

♻️ Proposed fix to expose progress state to assistive technology

     <div class="track">
+    <div
+      class="track"
+      role="progressbar"
+      aria-valuemin="0"
+      aria-valuemax="100"
+      aria-valuenow={determinate ? Math.round(pct) : undefined}
+    >
       {`#if` determinate}
         <div class="fill" style="width:{pct}%"></div>
       {:else}
         <div class="fill sweep"></div>
       {/if}
     </div>

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/lib/components/ui/LoadingScreen.svelte` around lines 89 - 95,
Update the `.track` element in the loading screen to add `role="progressbar"`
and expose `aria-valuenow` as `pct` only when `determinate` is true; omit
`aria-valuenow` in indeterminate mode while preserving the existing root
`aria-label` and visual fill behavior.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@frontend/src/lib/components/ui/LoadingScreen.svelte`:
- Around line 89-95: Update the `.track` element in the loading screen to add
`role="progressbar"` and expose `aria-valuenow` as `pct` only when `determinate`
is true; omit `aria-valuenow` in indeterminate mode while preserving the
existing root `aria-label` and visual fill behavior.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 55376bee-422a-44d6-a4ca-c1dff7b86161

📥 Commits

Reviewing files that changed from the base of the PR and between 5aebabc and c5ce68e.

📒 Files selected for processing (1)

• frontend/src/lib/components/ui/LoadingScreen.svelte