Merge pull request #1497 from vespa-engine/leandro/loading-spinner

Simplify spinner icon

visual-retrieval-colpali/frontend/app.py

@@ -197,9 +197,9 @@ def Search(request, search_results=[]):
 
 def LoadingMessage():
     return Div(
-        P(Lucide(icon="loader-circle", size="50", cls="animate-rotate htmx-indicator")),
-        P("Retrieving search results", cls="text-base text-center"),
-        cls="p-10 text-center text-muted-foreground",
+        Lucide(icon="loader-circle", cls="size-5 mr-1.5 animate-spin"),
+        Span("Retrieving search results", cls="text-base text-center"),
+        cls="p-10 text-muted-foreground flex items-center justify-center",
         id="loading-indicator",
     )
 

visual-retrieval-colpali/globals.css

@@ -148,15 +148,6 @@
     }
 }
 
-@keyframes rotate {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}
-
 .animate-fade-in {
     animation: fade-in 1s ease-out forwards;
 }
@@ -165,11 +156,6 @@
     animation: slide-up 1s ease-out forwards;
 }
 
-.animate-rotate {
-    animation: rotate 2s linear infinite;
-    display: inline;
-}
-
 .sim-map-button.active {
     background-color: #61D790;
     color: #2E2F27;

visual-retrieval-colpali/output.css

@@ -801,6 +801,10 @@ body {
   margin-bottom: 0.25rem;
 }
 
+.mr-1\.5 {
+  margin-right: 0.375rem;
+}
+
 .mt-2 {
   margin-top: 0.5rem;
 }
@@ -842,6 +846,11 @@ body {
   height: 1rem;
 }
 
+.size-5 {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
 .h-10 {
   height: 2.5rem;
 }
@@ -930,6 +939,10 @@ body {
   min-height: 80px;
 }
 
+.min-h-screen {
+  min-height: 100vh;
+}
+
 .w-10 {
   width: 2.5rem;
 }
@@ -1047,6 +1060,16 @@ body {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
 .cursor-default {
   cursor: default;
 }
@@ -1289,6 +1312,11 @@ body {
   background-color: rgb(0 0 0 / 0.8);
 }
 
+.bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+}
+
 .bg-border {
   background-color: hsl(var(--border));
 }
@@ -1325,6 +1353,16 @@ body {
   background-color: hsl(var(--primary));
 }
 
+.bg-red-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
+}
+
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+
 .bg-secondary {
   background-color: hsl(var(--secondary));
 }
@@ -1475,6 +1513,11 @@ body {
   line-height: 2rem;
 }
 
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
 .text-5xl {
   font-size: 3rem;
   line-height: 1;
@@ -1557,6 +1600,16 @@ body {
   color: hsl(var(--foreground) / 0.5);
 }
 
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
 .text-muted-foreground {
   color: hsl(var(--muted-foreground));
 }
@@ -1903,16 +1956,6 @@ body {
   }
 }
 
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 .animate-fade-in {
   animation: fade-in 1s ease-out forwards;
 }
@@ -1921,11 +1964,6 @@ body {
   animation: slide-up 1s ease-out forwards;
 }
 
-.animate-rotate {
-  animation: rotate 2s linear infinite;
-  display: inline;
-}
-
 .sim-map-button.active {
   background-color: #61D790;
   color: #2E2F27;