From 89d5987cef6f51c3090b866fa266f5484df2b08a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Jasi=C5=84ski?= <jasins.marek@gmail.com>
Date: Thu, 7 May 2026 18:55:03 +0200
Subject: [PATCH] fix(ui): implement shimmer animation for GroundednessBadge

---
 .../Molecules/GroundednessBadge.razor         | 32 ------------
 .../Molecules/GroundednessBadge.razor.css     | 49 +++++++++++++++++++
 2 files changed, 49 insertions(+), 32 deletions(-)
 create mode 100644 src/NexusReader.UI.Shared/Components/Molecules/GroundednessBadge.razor.css

diff --git a/src/NexusReader.UI.Shared/Components/Molecules/GroundednessBadge.razor b/src/NexusReader.UI.Shared/Components/Molecules/GroundednessBadge.razor
index 182c5b5..723b394 100644
--- a/src/NexusReader.UI.Shared/Components/Molecules/GroundednessBadge.razor
+++ b/src/NexusReader.UI.Shared/Components/Molecules/GroundednessBadge.razor
@@ -18,39 +18,7 @@
     }
 </div>
 
-<style>
-    .groundedness-badge {
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-        padding: 4px 8px;
-        border-radius: 12px;
-        font-size: 0.75rem;
-        font-weight: 600;
-        background: rgba(255, 255, 255, 0.05);
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        transition: all 0.3s ease;
-    }
 
-    .groundedness-badge.status-high {
-        color: var(--nexus-neon);
-        border-color: var(--nexus-neon);
-    }
-
-    .groundedness-badge.status-medium {
-        color: #ffaa00;
-        border-color: #ffaa00;
-    }
-
-    .groundedness-badge.status-low {
-        color: #ff4444;
-        border-color: #ff4444;
-    }
-
-    .shimmer {
-        opacity: 0.6;
-    }
-</style>
 
 @code {
     [Parameter] public string Answer { get; set; } = string.Empty;
diff --git a/src/NexusReader.UI.Shared/Components/Molecules/GroundednessBadge.razor.css b/src/NexusReader.UI.Shared/Components/Molecules/GroundednessBadge.razor.css
new file mode 100644
index 0000000..bfca335
--- /dev/null
+++ b/src/NexusReader.UI.Shared/Components/Molecules/GroundednessBadge.razor.css
@@ -0,0 +1,49 @@
+.groundedness-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 8px;
+    border-radius: 12px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+}
+
+.groundedness-badge.status-high {
+    color: var(--nexus-neon);
+    border-color: var(--nexus-neon);
+}
+
+.groundedness-badge.status-medium {
+    color: #ffaa00;
+    border-color: #ffaa00;
+}
+
+.groundedness-badge.status-low {
+    color: #ff4444;
+    border-color: #ff4444;
+}
+
+.shimmer {
+    background: linear-gradient(
+        120deg, 
+        rgba(255, 255, 255, 0) 30%, 
+        rgba(255, 255, 255, 0.3) 50%, 
+        rgba(255, 255, 255, 0) 70%
+    );
+    background-size: 200% 100%;
+    animation: shimmer-move 2s infinite linear;
+    display: inline-block;
+    color: rgba(255, 255, 255, 0.6);
+}
+
+@keyframes shimmer-move {
+    0% {
+        background-position: 100% 0;
+    }
+    100% {
+        background-position: -100% 0;
+    }
+}