From 09078cf66dc4800a2d44011ded76752eb5887992 Mon Sep 17 00:00:00 2001
From: aaravlu <demolemon@outlook.at>
Date: Wed, 12 Feb 2025 13:06:21 +0800
Subject: [PATCH 1/3] Add a generic spin loader

---
 src/shared/styles.rs | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/src/shared/styles.rs b/src/shared/styles.rs
index ac2cba47..f4f6ac60 100644
--- a/src/shared/styles.rs
+++ b/src/shared/styles.rs
@@ -190,4 +190,40 @@ live_design! {
             }
         }
     }
+
+    pub RobrixSpinLoader = <View> {
+        width: Fill, height: Fill
+        show_bg: true,
+        draw_bg: {
+            color: #000000AF
+            fn pixel(self) -> vec4 {
+                // Normalize and adjust for aspect ratio to ensure circular shape.
+                let aspect = self.rect_size.x / self.rect_size.y;
+
+                let pos = vec2(
+                    (self.pos.x - 0.5) * max(aspect, 1.),
+                    (self.pos.y - 0.5) * max(1. / aspect, 1.)
+                ) * 2.8;
+
+                let radius = length(pos);
+
+                // Rotate over time
+                let angle = atan(pos.y, pos.x) + self.time * PI * 2.0;
+
+                // Create a circular shape with thickness
+                let inner_radius = 0.5;
+                let outer_radius = 0.7;
+                let thickness = outer_radius - inner_radius;
+
+                let edge = abs(radius - (inner_radius + thickness * 0.5)) - thickness * 0.5;
+                let d = smoothstep(0.01, -0.01, edge);
+
+                // 5 segments for the spinner.
+                // Use sin to create an effect where parts of the circle fade in and out.
+                let alpha = sin(angle * 5.0) * 0.5 + 0.5;
+
+                return vec4(self.color.rgb, d * alpha);
+            }
+        }
+    }
 }

From c31ec6e387ebc0c449128cdf7972b94ad7d8b879 Mon Sep 17 00:00:00 2001
From: aaravlu <demolemon@outlook.at>
Date: Wed, 12 Feb 2025 13:19:38 +0800
Subject: [PATCH 2/3] Add doc for spin loader

---
 src/shared/styles.rs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/shared/styles.rs b/src/shared/styles.rs
index f4f6ac60..f71236cd 100644
--- a/src/shared/styles.rs
+++ b/src/shared/styles.rs
@@ -191,6 +191,7 @@ live_design! {
         }
     }
 
+    // A generic spinner widget styled for Robrix.
     pub RobrixSpinLoader = <View> {
         width: Fill, height: Fill
         show_bg: true,

From 628ae06081ca39f7bb5f12abf5b588b7e7dfd9c7 Mon Sep 17 00:00:00 2001
From: aaravlu <demolemon@outlook.at>
Date: Fri, 14 Feb 2025 10:06:31 +0800
Subject: [PATCH 3/3] Make spin loader configurable

---
 src/shared/styles.rs | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/shared/styles.rs b/src/shared/styles.rs
index f71236cd..b3a02e8e 100644
--- a/src/shared/styles.rs
+++ b/src/shared/styles.rs
@@ -196,20 +196,22 @@ live_design! {
         width: Fill, height: Fill
         show_bg: true,
         draw_bg: {
-            color: #000000AF
+            color: #00000000
+
+            instance rotation_speed: 1.
+            instance num_segments: 5.
             fn pixel(self) -> vec4 {
                 // Normalize and adjust for aspect ratio to ensure circular shape.
                 let aspect = self.rect_size.x / self.rect_size.y;
-
-                let pos = vec2(
-                    (self.pos.x - 0.5) * max(aspect, 1.),
-                    (self.pos.y - 0.5) * max(1. / aspect, 1.)
-                ) * 2.8;
+                let normalized_pos_x = (self.pos.x - 0.5) * max(aspect, 1.);
+                let normalized_pos_y = (self.pos.y - 0.5) * max(1. / aspect, 1.);
+                let pos = vec2(normalized_pos_x, normalized_pos_y) * 2.8;
 
                 let radius = length(pos);
 
                 // Rotate over time
-                let angle = atan(pos.y, pos.x) + self.time * PI * 2.0;
+                let angle_offset = self.time * self.rotation_speed * PI * 2.0;
+                let angle = atan(pos.y, pos.x) + angle_offset;
 
                 // Create a circular shape with thickness
                 let inner_radius = 0.5;
@@ -221,9 +223,9 @@ live_design! {
 
                 // 5 segments for the spinner.
                 // Use sin to create an effect where parts of the circle fade in and out.
-                let alpha = sin(angle * 5.0) * 0.5 + 0.5;
+                let alpha = (sin(angle * self.num_segments) * 0.5 + 0.5) * d;
 
-                return vec4(self.color.rgb, d * alpha);
+                return vec4(self.color.rgb, alpha);
             }
         }
     }