From 41cc9f8f2141728c5eb73e4e321d8786f43740e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Jasi=C5=84ski?= <jasins.marek@gmail.com>
Date: Wed, 3 Jun 2026 19:43:21 +0200
Subject: [PATCH] feat: replace CSS spinners with SVG icons and improve
 disabled button styling in SelectionAiPanel

---
 .../Components/Molecules/SelectionAiPanel.razor    | 14 ++++++++++----
 .../Molecules/SelectionAiPanel.razor.css           |  8 ++++++++
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/NexusReader.UI.Shared/Components/Molecules/SelectionAiPanel.razor b/src/NexusReader.UI.Shared/Components/Molecules/SelectionAiPanel.razor
index db859d3..d0c600e 100644
--- a/src/NexusReader.UI.Shared/Components/Molecules/SelectionAiPanel.razor
+++ b/src/NexusReader.UI.Shared/Components/Molecules/SelectionAiPanel.razor
@@ -9,12 +9,15 @@
 @if (IsVisible)
 {
     <div class="selection-ai-panel @(_positionBelow ? "below" : "")" style="@_style">
-        <button class="toolbar-btn primary @(IsLoadingSummary ? "loading" : "") @(IsAnyLoading ? "disabled" : "")" 
+        <button id="summary-btn" class="toolbar-btn primary @(IsLoadingSummary ? "loading" : "") @(IsAnyLoading ? "disabled cursor-not-allowed opacity-50" : "")" 
                 disabled="@IsAnyLoading" 
                 @onclick="RequestSummaryAsync">
             @if (IsLoadingSummary)
             {
-                <span class="spinner-inline"></span>
+                <svg class="animate-spin h-4 w-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" style="animation: spin 1s linear infinite; width: 14px; height: 14px; color: currentColor; display: inline-block; margin-right: 4px;">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" style="opacity: 0.25;"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" style="opacity: 0.75;"></path>
+                </svg>
                 <span class="btn-text">Podsumowywanie...</span>
             }
             else
@@ -24,12 +27,15 @@
             }
         </button>
         <div class="toolbar-divider"></div>
-        <button class="toolbar-btn secondary @(IsLoadingQuiz ? "loading" : "") @(IsAnyLoading ? "disabled" : "")" 
+        <button id="quiz-btn" class="toolbar-btn secondary @(IsLoadingQuiz ? "loading" : "") @(IsAnyLoading ? "disabled cursor-not-allowed opacity-50" : "")" 
                 disabled="@IsAnyLoading" 
                 @onclick="GenerateQuizAsync">
             @if (IsLoadingQuiz)
             {
-                <span class="spinner-inline"></span>
+                <svg class="animate-spin h-4 w-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" style="animation: spin 1s linear infinite; width: 14px; height: 14px; color: currentColor; display: inline-block; margin-right: 4px;">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" style="opacity: 0.25;"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" style="opacity: 0.75;"></path>
+                </svg>
                 <span class="btn-text">Generowanie...</span>
             }
             else
diff --git a/src/NexusReader.UI.Shared/Components/Molecules/SelectionAiPanel.razor.css b/src/NexusReader.UI.Shared/Components/Molecules/SelectionAiPanel.razor.css
index 541be26..735e3b8 100644
--- a/src/NexusReader.UI.Shared/Components/Molecules/SelectionAiPanel.razor.css
+++ b/src/NexusReader.UI.Shared/Components/Molecules/SelectionAiPanel.razor.css
@@ -109,3 +109,11 @@
     }
 }
 
+.opacity-50 {
+    opacity: 0.5 !important;
+}
+
+.cursor-not-allowed {
+    cursor: not-allowed !important;
+}
+