fix(board header): replace loading icon with spinner

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();
+  });
 });

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);