1 files changed, 19 insertions, 4 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/app.js b/packages/meshbay-hub/src/meshbay_hub/static/app.js
index ff066cf..6f4bb92 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/app.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/app.js
@@ -157,9 +157,11 @@ function TransferWidget() {
   }, [open]);
 
   const running = items.filter(i => i.status === 'running');
-  const waiting = items.filter(i => i.status === 'queued');
+  const waiting = items.filter(
+    i => i.status === 'queued' || i.status === 'preparing');
   const finished = items.filter(
-    i => i.status !== 'running' && i.status !== 'queued');
+    i => i.status !== 'running' && i.status !== 'queued'
+      && i.status !== 'preparing');
   const active = running.length + waiting.length;
 
   // Grouped, and in this order: what is moving, what is waiting, what is over.
@@ -240,7 +242,8 @@ function TransferRow({ it }) {
           ? html`<a class="transfer-name" href="#" title=${it.name}
               onClick=${(e) => { e.preventDefault(); transfers.open(it.id); }}>${it.name}</a>`
           : html`<span class="transfer-name" title=${it.name}>${it.name}</span>`}
-        ${(it.status === 'running' || it.status === 'queued') && html`
+        ${(it.status === 'running' || it.status === 'queued'
+           || it.status === 'preparing') && html`
           <button class="transfer-cancel"
             aria-label=${t('transfers.cancel_one', { name: it.name })}
             title=${t('transfers.cancel')}
@@ -249,7 +252,19 @@ function TransferRow({ it }) {
           </button>
         `}
       </div>
-      ${it.status === 'queued'
+      ${it.status === 'preparing'
+        ? html`
+          ${/* Not a progress bar at 0%: nothing is wrong and nothing is
+                stalled, the download is still finding somewhere to write. The
+                row exists from the click precisely so this state is visible
+                instead of being an empty panel. */''}
+          <div class="dl-progress dl-waiting"></div>
+          <div class="transfer-meta">
+            <span>${t('transfers.preparing')}</span>
+            <span>${formatSize(it.total)}</span>
+          </div>
+        `
+        : it.status === 'queued'
         ? html`
           <div class="dl-progress dl-waiting"></div>
           <div class="transfer-meta">