From 99626c7e31e4d8fa9a6126dcd2576f81c4faf465 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Thu, 1 Jan 2026 22:39:29 -1000
Subject: [PATCH] fix: use tailwind for loading indicator as primer component
 loading property not working as expected

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 src/renderer/components/Sidebar.tsx           |   3 +-
 .../__snapshots__/Sidebar.test.tsx.snap       | 116 ++++++++----------
 .../__snapshots__/AppLayout.test.tsx.snap     | 116 ++++++++----------
 3 files changed, 110 insertions(+), 125 deletions(-)

diff --git a/src/renderer/components/Sidebar.tsx b/src/renderer/components/Sidebar.tsx
index f4c7ae55c..f3618375f 100644
--- a/src/renderer/components/Sidebar.tsx
+++ b/src/renderer/components/Sidebar.tsx
@@ -143,11 +143,12 @@ export const Sidebar: FC = () => {
           <>
             <IconButton
               aria-label="Refresh"
+              className={status === 'loading' ? '[&_svg]:animate-spin' : ''}
               data-testid="sidebar-refresh"
               description="Refresh notifications"
               disabled={status === 'loading'}
               icon={SyncIcon}
-              loading={status === 'loading'}
+              // loading={status === 'loading'}
               onClick={() => refreshNotifications()}
               size="small"
               tooltipDirection="e"
diff --git a/src/renderer/components/__snapshots__/Sidebar.test.tsx.snap b/src/renderer/components/__snapshots__/Sidebar.test.tsx.snap
index 76c3cca09..58b56b976 100644
--- a/src/renderer/components/__snapshots__/Sidebar.test.tsx.snap
+++ b/src/renderer/components/__snapshots__/Sidebar.test.tsx.snap
@@ -359,39 +359,35 @@ exports[`renderer/components/Sidebar.tsx should render itself & its children (lo
               data-padding="normal"
               data-wrap="nowrap"
             >
-              <div
-                data-loading-wrapper="true"
+              <button
+                aria-describedby="_r_b_"
+                aria-label="Refresh"
+                class="prc-Button-ButtonBase-9n-Xk prc-Button-IconButton-fyge7"
+                data-component="IconButton"
+                data-loading="false"
+                data-no-visuals="true"
+                data-size="small"
+                data-testid="sidebar-refresh"
+                data-variant="invisible"
+                type="button"
               >
-                <button
-                  aria-describedby="_r_b_"
-                  aria-label="Refresh"
-                  class="prc-Button-ButtonBase-9n-Xk prc-Button-IconButton-fyge7"
-                  data-component="IconButton"
-                  data-loading="false"
-                  data-no-visuals="true"
-                  data-size="small"
-                  data-testid="sidebar-refresh"
-                  data-variant="invisible"
-                  type="button"
+                <svg
+                  aria-hidden="true"
+                  class="octicon octicon-sync"
+                  display="inline-block"
+                  fill="currentColor"
+                  focusable="false"
+                  height="16"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
+                  viewBox="0 0 16 16"
+                  width="16"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="octicon octicon-sync"
-                    display="inline-block"
-                    fill="currentColor"
-                    focusable="false"
-                    height="16"
-                    overflow="visible"
-                    style="vertical-align: text-bottom;"
-                    viewBox="0 0 16 16"
-                    width="16"
-                  >
-                    <path
-                      d="M1.705 8.005a.75.75 0 0 1 .834.656 5.5 5.5 0 0 0 9.592 2.97l-1.204-1.204a.25.25 0 0 1 .177-.427h3.646a.25.25 0 0 1 .25.25v3.646a.25.25 0 0 1-.427.177l-1.38-1.38A7.002 7.002 0 0 1 1.05 8.84a.75.75 0 0 1 .656-.834ZM8 2.5a5.487 5.487 0 0 0-4.131 1.869l1.204 1.204A.25.25 0 0 1 4.896 6H1.25A.25.25 0 0 1 1 5.75V2.104a.25.25 0 0 1 .427-.177l1.38 1.38A7.002 7.002 0 0 1 14.95 7.16a.75.75 0 0 1-1.49.178A5.5 5.5 0 0 0 8 2.5Z"
-                    />
-                  </svg>
-                </button>
-              </div>
+                  <path
+                    d="M1.705 8.005a.75.75 0 0 1 .834.656 5.5 5.5 0 0 0 9.592 2.97l-1.204-1.204a.25.25 0 0 1 .177-.427h3.646a.25.25 0 0 1 .25.25v3.646a.25.25 0 0 1-.427.177l-1.38-1.38A7.002 7.002 0 0 1 1.05 8.84a.75.75 0 0 1 .656-.834ZM8 2.5a5.487 5.487 0 0 0-4.131 1.869l1.204 1.204A.25.25 0 0 1 4.896 6H1.25A.25.25 0 0 1 1 5.75V2.104a.25.25 0 0 1 .427-.177l1.38 1.38A7.002 7.002 0 0 1 14.95 7.16a.75.75 0 0 1-1.49.178A5.5 5.5 0 0 0 8 2.5Z"
+                  />
+                </svg>
+              </button>
               <span
                 aria-hidden="true"
                 class="prc-TooltipV2-Tooltip-tLeuB"
@@ -704,39 +700,35 @@ exports[`renderer/components/Sidebar.tsx should render itself & its children (lo
             data-padding="normal"
             data-wrap="nowrap"
           >
-            <div
-              data-loading-wrapper="true"
+            <button
+              aria-describedby="_r_b_"
+              aria-label="Refresh"
+              class="prc-Button-ButtonBase-9n-Xk prc-Button-IconButton-fyge7"
+              data-component="IconButton"
+              data-loading="false"
+              data-no-visuals="true"
+              data-size="small"
+              data-testid="sidebar-refresh"
+              data-variant="invisible"
+              type="button"
             >
-              <button
-                aria-describedby="_r_b_"
-                aria-label="Refresh"
-                class="prc-Button-ButtonBase-9n-Xk prc-Button-IconButton-fyge7"
-                data-component="IconButton"
-                data-loading="false"
-                data-no-visuals="true"
-                data-size="small"
-                data-testid="sidebar-refresh"
-                data-variant="invisible"
-                type="button"
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-sync"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
               >
-                <svg
-                  aria-hidden="true"
-                  class="octicon octicon-sync"
-                  display="inline-block"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  overflow="visible"
-                  style="vertical-align: text-bottom;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M1.705 8.005a.75.75 0 0 1 .834.656 5.5 5.5 0 0 0 9.592 2.97l-1.204-1.204a.25.25 0 0 1 .177-.427h3.646a.25.25 0 0 1 .25.25v3.646a.25.25 0 0 1-.427.177l-1.38-1.38A7.002 7.002 0 0 1 1.05 8.84a.75.75 0 0 1 .656-.834ZM8 2.5a5.487 5.487 0 0 0-4.131 1.869l1.204 1.204A.25.25 0 0 1 4.896 6H1.25A.25.25 0 0 1 1 5.75V2.104a.25.25 0 0 1 .427-.177l1.38 1.38A7.002 7.002 0 0 1 14.95 7.16a.75.75 0 0 1-1.49.178A5.5 5.5 0 0 0 8 2.5Z"
-                  />
-                </svg>
-              </button>
-            </div>
+                <path
+                  d="M1.705 8.005a.75.75 0 0 1 .834.656 5.5 5.5 0 0 0 9.592 2.97l-1.204-1.204a.25.25 0 0 1 .177-.427h3.646a.25.25 0 0 1 .25.25v3.646a.25.25 0 0 1-.427.177l-1.38-1.38A7.002 7.002 0 0 1 1.05 8.84a.75.75 0 0 1 .656-.834ZM8 2.5a5.487 5.487 0 0 0-4.131 1.869l1.204 1.204A.25.25 0 0 1 4.896 6H1.25A.25.25 0 0 1 1 5.75V2.104a.25.25 0 0 1 .427-.177l1.38 1.38A7.002 7.002 0 0 1 14.95 7.16a.75.75 0 0 1-1.49.178A5.5 5.5 0 0 0 8 2.5Z"
+                />
+              </svg>
+            </button>
             <span
               aria-hidden="true"
               class="prc-TooltipV2-Tooltip-tLeuB"
diff --git a/src/renderer/components/layout/__snapshots__/AppLayout.test.tsx.snap b/src/renderer/components/layout/__snapshots__/AppLayout.test.tsx.snap
index f1b6ce013..963d1468c 100644
--- a/src/renderer/components/layout/__snapshots__/AppLayout.test.tsx.snap
+++ b/src/renderer/components/layout/__snapshots__/AppLayout.test.tsx.snap
@@ -273,39 +273,35 @@ exports[`renderer/components/layout/AppLayout.tsx should render itself & its chi
                 data-padding="normal"
                 data-wrap="nowrap"
               >
-                <div
-                  data-loading-wrapper="true"
+                <button
+                  aria-describedby="_r_b_"
+                  aria-label="Refresh"
+                  class="prc-Button-ButtonBase-9n-Xk prc-Button-IconButton-fyge7"
+                  data-component="IconButton"
+                  data-loading="false"
+                  data-no-visuals="true"
+                  data-size="small"
+                  data-testid="sidebar-refresh"
+                  data-variant="invisible"
+                  type="button"
                 >
-                  <button
-                    aria-describedby="_r_b_"
-                    aria-label="Refresh"
-                    class="prc-Button-ButtonBase-9n-Xk prc-Button-IconButton-fyge7"
-                    data-component="IconButton"
-                    data-loading="false"
-                    data-no-visuals="true"
-                    data-size="small"
-                    data-testid="sidebar-refresh"
-                    data-variant="invisible"
-                    type="button"
+                  <svg
+                    aria-hidden="true"
+                    class="octicon octicon-sync"
+                    display="inline-block"
+                    fill="currentColor"
+                    focusable="false"
+                    height="16"
+                    overflow="visible"
+                    style="vertical-align: text-bottom;"
+                    viewBox="0 0 16 16"
+                    width="16"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="octicon octicon-sync"
-                      display="inline-block"
-                      fill="currentColor"
-                      focusable="false"
-                      height="16"
-                      overflow="visible"
-                      style="vertical-align: text-bottom;"
-                      viewBox="0 0 16 16"
-                      width="16"
-                    >
-                      <path
-                        d="M1.705 8.005a.75.75 0 0 1 .834.656 5.5 5.5 0 0 0 9.592 2.97l-1.204-1.204a.25.25 0 0 1 .177-.427h3.646a.25.25 0 0 1 .25.25v3.646a.25.25 0 0 1-.427.177l-1.38-1.38A7.002 7.002 0 0 1 1.05 8.84a.75.75 0 0 1 .656-.834ZM8 2.5a5.487 5.487 0 0 0-4.131 1.869l1.204 1.204A.25.25 0 0 1 4.896 6H1.25A.25.25 0 0 1 1 5.75V2.104a.25.25 0 0 1 .427-.177l1.38 1.38A7.002 7.002 0 0 1 14.95 7.16a.75.75 0 0 1-1.49.178A5.5 5.5 0 0 0 8 2.5Z"
-                      />
-                    </svg>
-                  </button>
-                </div>
+                    <path
+                      d="M1.705 8.005a.75.75 0 0 1 .834.656 5.5 5.5 0 0 0 9.592 2.97l-1.204-1.204a.25.25 0 0 1 .177-.427h3.646a.25.25 0 0 1 .25.25v3.646a.25.25 0 0 1-.427.177l-1.38-1.38A7.002 7.002 0 0 1 1.05 8.84a.75.75 0 0 1 .656-.834ZM8 2.5a5.487 5.487 0 0 0-4.131 1.869l1.204 1.204A.25.25 0 0 1 4.896 6H1.25A.25.25 0 0 1 1 5.75V2.104a.25.25 0 0 1 .427-.177l1.38 1.38A7.002 7.002 0 0 1 14.95 7.16a.75.75 0 0 1-1.49.178A5.5 5.5 0 0 0 8 2.5Z"
+                    />
+                  </svg>
+                </button>
                 <span
                   aria-hidden="true"
                   class="prc-TooltipV2-Tooltip-tLeuB"
@@ -634,39 +630,35 @@ exports[`renderer/components/layout/AppLayout.tsx should render itself & its chi
               data-padding="normal"
               data-wrap="nowrap"
             >
-              <div
-                data-loading-wrapper="true"
+              <button
+                aria-describedby="_r_b_"
+                aria-label="Refresh"
+                class="prc-Button-ButtonBase-9n-Xk prc-Button-IconButton-fyge7"
+                data-component="IconButton"
+                data-loading="false"
+                data-no-visuals="true"
+                data-size="small"
+                data-testid="sidebar-refresh"
+                data-variant="invisible"
+                type="button"
               >
-                <button
-                  aria-describedby="_r_b_"
-                  aria-label="Refresh"
-                  class="prc-Button-ButtonBase-9n-Xk prc-Button-IconButton-fyge7"
-                  data-component="IconButton"
-                  data-loading="false"
-                  data-no-visuals="true"
-                  data-size="small"
-                  data-testid="sidebar-refresh"
-                  data-variant="invisible"
-                  type="button"
+                <svg
+                  aria-hidden="true"
+                  class="octicon octicon-sync"
+                  display="inline-block"
+                  fill="currentColor"
+                  focusable="false"
+                  height="16"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
+                  viewBox="0 0 16 16"
+                  width="16"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="octicon octicon-sync"
-                    display="inline-block"
-                    fill="currentColor"
-                    focusable="false"
-                    height="16"
-                    overflow="visible"
-                    style="vertical-align: text-bottom;"
-                    viewBox="0 0 16 16"
-                    width="16"
-                  >
-                    <path
-                      d="M1.705 8.005a.75.75 0 0 1 .834.656 5.5 5.5 0 0 0 9.592 2.97l-1.204-1.204a.25.25 0 0 1 .177-.427h3.646a.25.25 0 0 1 .25.25v3.646a.25.25 0 0 1-.427.177l-1.38-1.38A7.002 7.002 0 0 1 1.05 8.84a.75.75 0 0 1 .656-.834ZM8 2.5a5.487 5.487 0 0 0-4.131 1.869l1.204 1.204A.25.25 0 0 1 4.896 6H1.25A.25.25 0 0 1 1 5.75V2.104a.25.25 0 0 1 .427-.177l1.38 1.38A7.002 7.002 0 0 1 14.95 7.16a.75.75 0 0 1-1.49.178A5.5 5.5 0 0 0 8 2.5Z"
-                    />
-                  </svg>
-                </button>
-              </div>
+                  <path
+                    d="M1.705 8.005a.75.75 0 0 1 .834.656 5.5 5.5 0 0 0 9.592 2.97l-1.204-1.204a.25.25 0 0 1 .177-.427h3.646a.25.25 0 0 1 .25.25v3.646a.25.25 0 0 1-.427.177l-1.38-1.38A7.002 7.002 0 0 1 1.05 8.84a.75.75 0 0 1 .656-.834ZM8 2.5a5.487 5.487 0 0 0-4.131 1.869l1.204 1.204A.25.25 0 0 1 4.896 6H1.25A.25.25 0 0 1 1 5.75V2.104a.25.25 0 0 1 .427-.177l1.38 1.38A7.002 7.002 0 0 1 14.95 7.16a.75.75 0 0 1-1.49.178A5.5 5.5 0 0 0 8 2.5Z"
+                  />
+                </svg>
+              </button>
               <span
                 aria-hidden="true"
                 class="prc-TooltipV2-Tooltip-tLeuB"