From 0877d5a5685a4a1a0bdb7b14e3209a8d02dfe6bf Mon Sep 17 00:00:00 2001
From: Christoph Brandau <Christoph.Brandau@janus-engineering.com>
Date: Thu, 9 Jul 2026 15:20:52 +0200
Subject: [PATCH] feat(status-panel): add loading overlay for ongoing
 operations

This update introduces a loading overlay in the StatusPanel component
to indicate ongoing operations. The overlay displays a spinner and
the current operation status, enhancing user experience during
long-running tasks.

- Added a loading overlay with a spinner for busy states
- Included operation status text to inform users of current actions
- Improved visual feedback for ongoing processes in the UI
---
 src/App.svelte                        |  1 +
 src/lib/components/StatusPanel.svelte | 51 +++++++++++++++++++++++++--
 2 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 503c7f7..6a43a5d 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -3734,6 +3734,7 @@
             {unstagedCount}
             {hasRepository}
             {isBusy}
+            {operation}
             {status}
             selectedFilePath={selectedExplorerPath}
             onSelectFile={selectFileFromStatus}
diff --git a/src/lib/components/StatusPanel.svelte b/src/lib/components/StatusPanel.svelte
index bfaa781..3d5e257 100644
--- a/src/lib/components/StatusPanel.svelte
+++ b/src/lib/components/StatusPanel.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Check, FileDiff, RotateCcw, Undo2 } from "@lucide/svelte";
+  import { Check, FileDiff, LoaderCircle, RotateCcw, Undo2 } from "@lucide/svelte";
   import type { FileStatusKind, GitFileStatus, GitStatus } from "../types";
 
   interface Props {
@@ -8,6 +8,7 @@
     unstagedCount: number;
     hasRepository: boolean;
     isBusy: boolean;
+    operation: string;
     status: GitStatus | null;
     selectedFilePath: string;
     onSelectFile: (file: GitFileStatus) => void;
@@ -25,6 +26,7 @@
     unstagedCount = 0,
     hasRepository = false,
     isBusy = false,
+    operation = "",
     status = null,
     selectedFilePath = "",
     onSelectFile = () => {},
@@ -136,7 +138,7 @@
   });
 </script>
 
-<section class="panel grid grid-rows-[auto_auto_1fr] overflow-hidden" aria-label="Working tree status">
+<section class="panel relative grid grid-rows-[auto_auto_1fr] overflow-hidden" aria-label="Working tree status">
   <div class="section-head">
     <div>
       <span class="eyebrow">Working tree</span>
@@ -278,4 +280,49 @@
       {/each}
     </div>
   {/if}
+
+  {#if isBusy && hasRepository}
+    <div class="status-panel-overlay" role="status" aria-live="polite">
+      <div class="status-panel-overlay-card">
+        <LoaderCircle class="spin" size={22} aria-hidden="true" />
+        <span>{operation || "Working"}…</span>
+      </div>
+    </div>
+  {/if}
 </section>
+
+<style>
+  .status-panel-overlay {
+    position: absolute;
+    inset: 0;
+    z-index: 20;
+    display: grid;
+    place-items: center;
+    background: rgba(8, 9, 16, 0.5);
+    backdrop-filter: blur(3px);
+    animation: status-panel-overlay-in 120ms ease;
+  }
+
+  .status-panel-overlay-card {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 20px;
+    border: 1px solid var(--color-border);
+    border-radius: 10px;
+    background: var(--color-surface-raised);
+    color: var(--color-ink);
+    font-size: 13px;
+    font-weight: 600;
+    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
+  }
+
+  @keyframes status-panel-overlay-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .status-panel-overlay { animation: none; }
+  }
+</style>