From 0df81b598eb89e155fff24e73e13da39441c7402 Mon Sep 17 00:00:00 2001
From: Tommaso Casaburi <tom@bitsocial.net>
Date: Sat, 23 May 2026 23:30:51 +0700
Subject: [PATCH] fix(board header): replace loading icon with spinner

---
 public/assets/icons/offline-blue.png          | Bin 1270 -> 0 bytes
 .../__tests__/board-header.test.tsx           |  14 +++++++++
 src/index.css                                 |  28 +++++++++++++++++-
 3 files changed, 41 insertions(+), 1 deletion(-)
 delete mode 100644 public/assets/icons/offline-blue.png

diff --git a/public/assets/icons/offline-blue.png b/public/assets/icons/offline-blue.png
deleted file mode 100644
index edc011460fc8ca35f9a120740a2159573c15ab1c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1270
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`Ea{HEjtmSN`?>!lvI6-E$sR$z
z3=CCj3=9n|3=F@3LJcn%7)lKo7+xhXFj&oCU=S~uvn$XBC{d9b;hE;^%b*2hb1<+l
z3NbJPS&Tr)z$nE4G7ZRLuw#^lv)$S=8Cam=en1)oJb)Oa4ni|8U__X*fC;WzU;#6N
z4bpb|^nF(##aZAHS<Jw|Eeyhp4727)FfcGp$_$ApiSYHYO3u&KOH9d6O4X~#Edc3a
zu&J;DGILW)5)~?PbMlI<Dr}X&Dy)EPkg&dz0$52&wyjcxZ-9bxeo?A|nVx~3fs!4U
zf`WogQA(Oskc%5sJCJ9qlu=SrV5P5LUS6(OZmgGIl&)`RX=$l%V5DzkqzhD`TU?n}
zl31aeSF8*%1ZIv)YH@N=W<g12ex3rz+{C2((h^%GC6GmM0C8tYW*Wk#yke-gfF9Hb
z$><yE8R%ovmRgaCLmNm2q7CdXh;=p~!>l5MQj7C*N<q%DGdHpU+khg7a34fN1U3!G
zg6JCji!xJzK?1hH5NZLk7?OIBJFNmTD^hbJTrzW0^NK;PGBmT%$0~uY(K$aSzbLpM
zF*(%^Xb)Hmk`TITur-mmtU;21YP8V@#Trs9LXrqr6qrWrxNP*{>CKMoj{B#7z_jk=
z>Eak-A=n#i>)+xaF!yqHZ?F58;}L<EW2&F5Imhqi<d|5=%KDH!Lb9lJs_w=I@)>(>
zH63FT&Rl1<%cywY-qgo}9%bn>D&N1Itt#-<=G@iQkFGK=+<3QVkq5`mW6Pg@nR3r=
zzsCQ_)jvOaEy$eJ=hG*~V93F=>h-Ko)xvI1cIj~yF|@ceoGg^#R`8r;zkt8#$R-`t
zSx!1eY?3Y-*4+DztzWI}x?+1i*-@2m1`mVVN%Nuw_X61aPVVY#arC{sV%4fCn<G~5
zUd}JN_MWPKm(#~40gJibPpS`SxctA*xaM%DSb}S@$n&CYn=OK>j)-kreYj2b=Cdcy
zBKr^Q%$1$f$E;^$z~j6~XYuXhGau;n$(`7?FT6oI()-@I8C-e0`8V)|9#Q;%i19$#
zlk+>~%)9vKPm9I&-xc?@7x3+GR5ZSRRPp4KU#=ft9sb9pD7D<W<!Pu4C}(@R`njxg
HN@xNAYJ!*2

diff --git a/src/components/board-header/__tests__/board-header.test.tsx b/src/components/board-header/__tests__/board-header.test.tsx
index f0c98c9d..d5e4b5d1 100644
--- a/src/components/board-header/__tests__/board-header.test.tsx
+++ b/src/components/board-header/__tests__/board-header.test.tsx
@@ -200,4 +200,18 @@ describe('BoardHeader', () => {
     expect(container.querySelector('[data-testid="tooltip"]')?.getAttribute('data-content')).toBe('Board offline');
     expect(container.querySelector('img')?.getAttribute('src')).toBe('banner-a.png');
   });
+
+  it('renders the board loading indicator while online status is still loading', async () => {
+    testState.useIsCommunityOfflineValue = {
+      isOffline: false,
+      isOnlineStatusLoading: true,
+      offlineIconClass: 'yellowOfflineIcon',
+      offlineTitle: 'downloading board...',
+    };
+
+    await renderHeader('/mu');
+
+    expect(container.querySelector('[data-testid="tooltip"]')?.getAttribute('data-content')).toBe('downloading board...');
+    expect(container.querySelector('.yellowOfflineIcon')).not.toBeNull();
+  });
 });
diff --git a/src/index.css b/src/index.css
index 0d53e141..216136ad 100644
--- a/src/index.css
+++ b/src/index.css
@@ -57,13 +57,39 @@ hr {
 }
 
 .yellowOfflineIcon {
-  background-image: url('/assets/icons/offline-blue.png');
+  background-image: none;
+  border: 1px solid currentColor;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  box-sizing: border-box;
+  -webkit-animation: offline-loading-spin 800ms steps(8, end) infinite;
+  animation: offline-loading-spin 800ms steps(8, end) infinite;
 }
 
 .redOfflineIcon {
   background-image: url('/assets/icons/offline-red.png');
 }
 
+@keyframes offline-loading-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@-webkit-keyframes offline-loading-spin {
+  to {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .yellowOfflineIcon {
+    -webkit-animation: none;
+    animation: none;
+  }
+}
+
 @media (max-width: 640px) {
   .button {
     font-size: var(--button-font-size-mobile);