From c13ae77a8d366257a15f92dd91eed1c645b82d97 Mon Sep 17 00:00:00 2001
From: Lilian <lilian@blahaj.space>
Date: Sun, 9 Feb 2025 16:48:22 +0100
Subject: [PATCH] [frontend/components] Add proper loading spinner to all
 loading indicators

---
 Iceshrimp.Frontend/Components/Compose.razor   |  2 +-
 .../Components/ConfirmDialog.razor            |  2 +-
 .../Components/FollowRequestList.razor        |  2 +-
 .../Components/FollowRequestList.razor.css    |  7 ++++++
 .../Components/LoadingSpinner.razor           |  5 ++++
 .../Components/LoadingSpinner.razor.css       | 25 +++++++++++++++++++
 .../Components/NoteLikeDetails.razor          |  2 +-
 .../Components/NoteLikeDetails.razor.css      |  5 ++++
 .../Components/NoteRenoteDetails.razor        |  2 +-
 .../Components/NoteRenoteDetails.razor.css    |  5 ++++
 .../Components/NotificationList.razor         |  2 +-
 .../Components/NotificationList.razor.css     |  8 ++++++
 .../Components/PromptDialog.razor             |  2 +-
 Iceshrimp.Frontend/Components/ScrollEnd.razor |  2 +-
 .../Components/SelectDialog.razor             |  2 +-
 .../Components/StreamingStatus.razor          |  4 +--
 Iceshrimp.Frontend/Pages/DrivePage.razor      |  2 +-
 Iceshrimp.Frontend/Pages/DrivePage.razor.css  |  7 ++++++
 Iceshrimp.Frontend/Pages/Login.razor          |  2 +-
 Iceshrimp.Frontend/Pages/Login.razor.css      |  7 ++++++
 .../Pages/Moderation/CustomEmojis.razor       |  2 +-
 Iceshrimp.Frontend/Pages/ProfileView.razor    |  2 +-
 .../Pages/ProfileView.razor.css               |  7 ++++++
 Iceshrimp.Frontend/Pages/Register.razor       |  2 +-
 .../Pages/Settings/Account.razor              |  2 +-
 .../Pages/Settings/Filters.razor              |  2 +-
 .../Pages/Settings/Profile.razor              |  4 +--
 .../Pages/Settings/Profile.razor.css          |  7 ++++++
 Iceshrimp.Frontend/Pages/SingleNote.razor     |  2 +-
 Iceshrimp.Frontend/Pages/SingleNote.razor.css |  7 ++++++
 30 files changed, 111 insertions(+), 21 deletions(-)
 create mode 100644 Iceshrimp.Frontend/Components/LoadingSpinner.razor
 create mode 100644 Iceshrimp.Frontend/Components/LoadingSpinner.razor.css

diff --git a/Iceshrimp.Frontend/Components/Compose.razor b/Iceshrimp.Frontend/Components/Compose.razor
index d581b57c..78fe9725 100644
--- a/Iceshrimp.Frontend/Components/Compose.razor
+++ b/Iceshrimp.Frontend/Components/Compose.razor
@@ -30,7 +30,7 @@
                     @Loc["ComposeNote"]<Icon Name="Icons.PaperPlaneRight"/>
                 </Initial>
                 <Loading>
-                    @Loc["Sending"]<Icon Name="Icons.Spinner"/>
+                    @Loc["Sending"]<LoadingSpinner />
                 </Loading>
                 <Success>
                     @Loc["Done"]<Icon Name="Icons.Check"/>
diff --git a/Iceshrimp.Frontend/Components/ConfirmDialog.razor b/Iceshrimp.Frontend/Components/ConfirmDialog.razor
index 0d1bbd96..3c4e0f42 100644
--- a/Iceshrimp.Frontend/Components/ConfirmDialog.razor
+++ b/Iceshrimp.Frontend/Components/ConfirmDialog.razor
@@ -10,7 +10,7 @@
     <div class="confirm @(Waiting ? "waiting" : "")">
         @if (Waiting)
         {
-            <Icon Name="Icons.Spinner" Size="3rem"/>
+            <LoadingSpinner Scale="1.5"/>
         }
         else
         {
diff --git a/Iceshrimp.Frontend/Components/FollowRequestList.razor b/Iceshrimp.Frontend/Components/FollowRequestList.razor
index 647d7e8a..7682f52f 100644
--- a/Iceshrimp.Frontend/Components/FollowRequestList.razor
+++ b/Iceshrimp.Frontend/Components/FollowRequestList.razor
@@ -20,7 +20,7 @@
 }
 @if (_init == LoadState.Loading)
 {
-    <div>Loading!</div>
+    <div class="loading"><LoadingSpinner Scale="2" /></div>
 }
 @if (_init == LoadState.Emtpy)
 {
diff --git a/Iceshrimp.Frontend/Components/FollowRequestList.razor.css b/Iceshrimp.Frontend/Components/FollowRequestList.razor.css
index 946f7093..89bdc97c 100644
--- a/Iceshrimp.Frontend/Components/FollowRequestList.razor.css
+++ b/Iceshrimp.Frontend/Components/FollowRequestList.razor.css
@@ -5,4 +5,11 @@
     width: 100%;
     overflow-x: auto;
     padding: 0.5rem;
+}
+
+.loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 25vh;
 }
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Components/LoadingSpinner.razor b/Iceshrimp.Frontend/Components/LoadingSpinner.razor
new file mode 100644
index 00000000..07cf5f58
--- /dev/null
+++ b/Iceshrimp.Frontend/Components/LoadingSpinner.razor
@@ -0,0 +1,5 @@
+<svg class="animate-spin" viewBox="0 0 24 24" style="--scale: @Scale"></svg>
+
+@code {
+    [Parameter] public double Scale { get; set; } = 1;
+}
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Components/LoadingSpinner.razor.css b/Iceshrimp.Frontend/Components/LoadingSpinner.razor.css
new file mode 100644
index 00000000..3ef35334
--- /dev/null
+++ b/Iceshrimp.Frontend/Components/LoadingSpinner.razor.css
@@ -0,0 +1,25 @@
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.animate-spin {
+    animation: spin 1s linear infinite;
+    margin-block: auto;
+}
+
+svg {
+    --scale: 1;
+    display: inline;
+    height: calc(1rem * var(--scale));
+    width: calc(1rem * var(--scale));
+    border-radius: 9999px;
+    border-width: calc(2px * var(--scale));
+    border-color: transparent;
+    background-color: transparent;
+    border-right-color: white;
+    border-top-color: white;
+    border-style: solid;
+    margin-right: 0.5rem;
+}
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Components/NoteLikeDetails.razor b/Iceshrimp.Frontend/Components/NoteLikeDetails.razor
index 3a8db53f..7c4066be 100644
--- a/Iceshrimp.Frontend/Components/NoteLikeDetails.razor
+++ b/Iceshrimp.Frontend/Components/NoteLikeDetails.razor
@@ -26,7 +26,7 @@
 }
 @if (State is State.Loading)
 {
-    <span>Loading</span>
+    <span class="loading"><LoadingSpinner Scale="1.5"/></span>
 }
 @if (State is State.Error)
 {
diff --git a/Iceshrimp.Frontend/Components/NoteLikeDetails.razor.css b/Iceshrimp.Frontend/Components/NoteLikeDetails.razor.css
index e69de29b..48ff4f93 100644
--- a/Iceshrimp.Frontend/Components/NoteLikeDetails.razor.css
+++ b/Iceshrimp.Frontend/Components/NoteLikeDetails.razor.css
@@ -0,0 +1,5 @@
+.loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Components/NoteRenoteDetails.razor b/Iceshrimp.Frontend/Components/NoteRenoteDetails.razor
index 1a278f5c..2666f1ef 100644
--- a/Iceshrimp.Frontend/Components/NoteRenoteDetails.razor
+++ b/Iceshrimp.Frontend/Components/NoteRenoteDetails.razor
@@ -26,7 +26,7 @@
 }
 @if (State is State.Loading)
 {
-    <span>Loading</span>
+    <span class="loading"><LoadingSpinner Scale="1.5" /></span>
 }
 @if (State is State.Error)
 {
diff --git a/Iceshrimp.Frontend/Components/NoteRenoteDetails.razor.css b/Iceshrimp.Frontend/Components/NoteRenoteDetails.razor.css
index e69de29b..48ff4f93 100644
--- a/Iceshrimp.Frontend/Components/NoteRenoteDetails.razor.css
+++ b/Iceshrimp.Frontend/Components/NoteRenoteDetails.razor.css
@@ -0,0 +1,5 @@
+.loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Components/NotificationList.razor b/Iceshrimp.Frontend/Components/NotificationList.razor
index d1ce35f4..a0c810e1 100644
--- a/Iceshrimp.Frontend/Components/NotificationList.razor
+++ b/Iceshrimp.Frontend/Components/NotificationList.razor
@@ -16,7 +16,7 @@
 
 @if (_state == State.Loading)
 {
-    <div>Loading!</div>
+    <div class="loading"><LoadingSpinner Scale="2" /></div>
 }
 
 @if (_state == State.Error)
diff --git a/Iceshrimp.Frontend/Components/NotificationList.razor.css b/Iceshrimp.Frontend/Components/NotificationList.razor.css
index 59a0c818..fd085482 100644
--- a/Iceshrimp.Frontend/Components/NotificationList.razor.css
+++ b/Iceshrimp.Frontend/Components/NotificationList.razor.css
@@ -14,4 +14,12 @@
     padding-left: 0.5rem;
     padding-right: 0.5rem;
     width: 100%;
+}
+
+.loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 25vh;
+    margin: auto;
 }
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Components/PromptDialog.razor b/Iceshrimp.Frontend/Components/PromptDialog.razor
index 8124e01f..b6d44123 100644
--- a/Iceshrimp.Frontend/Components/PromptDialog.razor
+++ b/Iceshrimp.Frontend/Components/PromptDialog.razor
@@ -10,7 +10,7 @@
     <div class="prompt @(Waiting ? "waiting" : "")">
         @if (Waiting)
         {
-            <Icon Name="Icons.Spinner" Size="3rem"/>
+            <LoadingSpinner Scale="1.5"/>
         }
         else
         {
diff --git a/Iceshrimp.Frontend/Components/ScrollEnd.razor b/Iceshrimp.Frontend/Components/ScrollEnd.razor
index 87a18860..58cac360 100644
--- a/Iceshrimp.Frontend/Components/ScrollEnd.razor
+++ b/Iceshrimp.Frontend/Components/ScrollEnd.razor
@@ -5,7 +5,7 @@
     <div @ref="context.Ref.Current" class="@Class" style="@Style">
         @if (_state is State.Loading or State.Init)
         {
-            <Icon Name="Icons.Spinner"/>
+            <LoadingSpinner />
         }
         else
         {
diff --git a/Iceshrimp.Frontend/Components/SelectDialog.razor b/Iceshrimp.Frontend/Components/SelectDialog.razor
index 08ce7144..293309e5 100644
--- a/Iceshrimp.Frontend/Components/SelectDialog.razor
+++ b/Iceshrimp.Frontend/Components/SelectDialog.razor
@@ -10,7 +10,7 @@
     <div class="select @(Waiting ? "waiting" : "")">
         @if (Waiting)
         {
-            <Icon Name="Icons.Spinner" Size="3rem"/>
+            <LoadingSpinner Scale="1.5" />
         }
         else
         {
diff --git a/Iceshrimp.Frontend/Components/StreamingStatus.razor b/Iceshrimp.Frontend/Components/StreamingStatus.razor
index 0f6131ad..d93e49fb 100644
--- a/Iceshrimp.Frontend/Components/StreamingStatus.razor
+++ b/Iceshrimp.Frontend/Components/StreamingStatus.razor
@@ -16,7 +16,7 @@
             break;
         case HubConnectionState.Connecting:
             <div class="state">
-                <svg class="animate-spin" viewBox="0 0 24 24"></svg> @Loc["Connecting"]
+                <LoadingSpinner/> @Loc["Connecting"]
             </div>
             break;
         case HubConnectionState.Disconnected:
@@ -26,7 +26,7 @@
             break;
         case HubConnectionState.Reconnecting:
             <div class="state">
-                <svg class="animate-spin" viewBox="0 0 24 24"></svg> @Loc["Reconnecting"]
+                <LoadingSpinner /> @Loc["Reconnecting"]
             </div>
             break;
     }
diff --git a/Iceshrimp.Frontend/Pages/DrivePage.razor b/Iceshrimp.Frontend/Pages/DrivePage.razor
index ec942145..7dd4cf17 100644
--- a/Iceshrimp.Frontend/Pages/DrivePage.razor
+++ b/Iceshrimp.Frontend/Pages/DrivePage.razor
@@ -70,7 +70,7 @@
 }
 @if (_state == State.Loading)
 {
-    <div>Loading</div>
+    <div class="loading"><LoadingSpinner Scale="2"/></div>
 }
 @if (_state == State.NotFound)
 {
diff --git a/Iceshrimp.Frontend/Pages/DrivePage.razor.css b/Iceshrimp.Frontend/Pages/DrivePage.razor.css
index 0924a811..427edcc2 100644
--- a/Iceshrimp.Frontend/Pages/DrivePage.razor.css
+++ b/Iceshrimp.Frontend/Pages/DrivePage.razor.css
@@ -2,6 +2,13 @@
     display: none;
 }
 
+.loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 25vh;
+}
+
 .drive-files {
     display: flex;
     flex-wrap: wrap;
diff --git a/Iceshrimp.Frontend/Pages/Login.razor b/Iceshrimp.Frontend/Pages/Login.razor
index bf3d0b73..f0696986 100644
--- a/Iceshrimp.Frontend/Pages/Login.razor
+++ b/Iceshrimp.Frontend/Pages/Login.razor
@@ -31,7 +31,7 @@
 
     @if (Loading)
     {
-        <span>Loading!</span>
+        <span class="loading"><LoadingSpinner Scale="2"/></span>
     }
     @if (Failure)
     {
diff --git a/Iceshrimp.Frontend/Pages/Login.razor.css b/Iceshrimp.Frontend/Pages/Login.razor.css
index b69af69e..6fa8e73d 100644
--- a/Iceshrimp.Frontend/Pages/Login.razor.css
+++ b/Iceshrimp.Frontend/Pages/Login.razor.css
@@ -26,6 +26,13 @@
     z-index: +11;
 }
 
+.loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 25vh;
+}
+
 .backdrop {
     opacity: 50%;
     background-color: black;
diff --git a/Iceshrimp.Frontend/Pages/Moderation/CustomEmojis.razor b/Iceshrimp.Frontend/Pages/Moderation/CustomEmojis.razor
index 58d8a289..8ae879d6 100644
--- a/Iceshrimp.Frontend/Pages/Moderation/CustomEmojis.razor
+++ b/Iceshrimp.Frontend/Pages/Moderation/CustomEmojis.razor
@@ -66,7 +66,7 @@
     @if (State is State.Loading)
     {
         <div class="loading">
-            <Icon Name="Icons.Spinner" Size="3rem"/>
+            <LoadingSpinner Scale="2" />
         </div>
     }
 
diff --git a/Iceshrimp.Frontend/Pages/ProfileView.razor b/Iceshrimp.Frontend/Pages/ProfileView.razor
index 626de0a7..31c9fc4a 100644
--- a/Iceshrimp.Frontend/Pages/ProfileView.razor
+++ b/Iceshrimp.Frontend/Pages/ProfileView.razor
@@ -120,7 +120,7 @@
 }
 @if (_loading)
 {
-    <div>loading</div>
+    <div class="loading"><LoadingSpinner Scale="2" /></div>
 }
 @if (_notFound)
 {
diff --git a/Iceshrimp.Frontend/Pages/ProfileView.razor.css b/Iceshrimp.Frontend/Pages/ProfileView.razor.css
index 111078dc..bc575a55 100644
--- a/Iceshrimp.Frontend/Pages/ProfileView.razor.css
+++ b/Iceshrimp.Frontend/Pages/ProfileView.razor.css
@@ -4,6 +4,13 @@
     overflow-x: clip;
 }
 
+.loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 25vh;
+}
+
 .header {
     display: flex;
     justify-content: space-between;
diff --git a/Iceshrimp.Frontend/Pages/Register.razor b/Iceshrimp.Frontend/Pages/Register.razor
index 8499f4a6..934bc784 100644
--- a/Iceshrimp.Frontend/Pages/Register.razor
+++ b/Iceshrimp.Frontend/Pages/Register.razor
@@ -54,7 +54,7 @@
                     <StateButton @ref="@LoginButton" ExtraClasses="button" OnClick="Submit">
                         <Initial>@Loc["Register"]</Initial>
                         <Success>@Loc["Success!"]</Success>
-                        <Loading>@Loc["Loading"]</Loading>
+                        <Loading>@Loc["Loading"] <LoadingSpinner /></Loading>
                         <Failed>@Loc["Try again"]</Failed>
                     </StateButton>
                 </div>
diff --git a/Iceshrimp.Frontend/Pages/Settings/Account.razor b/Iceshrimp.Frontend/Pages/Settings/Account.razor
index e6895c3d..ce63553d 100644
--- a/Iceshrimp.Frontend/Pages/Settings/Account.razor
+++ b/Iceshrimp.Frontend/Pages/Settings/Account.razor
@@ -64,7 +64,7 @@
                 <StateButton ExtraClasses="button" @ref="@SaveButton" OnClick="Submit">
                     <Initial>@Loc["Save changes"]</Initial>
                     <Success>@Loc["Saved"]</Success>
-                    <Loading>@Loc["Loading"]<Icon Name="Icons.Spinner"/>
+                    <Loading>@Loc["Loading"]<LoadingSpinner />
                     </Loading>
                     <Failed>@Loc["Error"]</Failed>
                 </StateButton>
diff --git a/Iceshrimp.Frontend/Pages/Settings/Filters.razor b/Iceshrimp.Frontend/Pages/Settings/Filters.razor
index 88c3059a..2d28407c 100644
--- a/Iceshrimp.Frontend/Pages/Settings/Filters.razor
+++ b/Iceshrimp.Frontend/Pages/Settings/Filters.razor
@@ -166,7 +166,7 @@
                 <Initial><Icon Name="Icons.Plus"/><span>@Loc["Add Filter"]</span></Initial>
                 <Success><Icon Name="Icons.Plus"/><span>@Loc["Add Filter"]</span></Success>
                 <Loading>
-                    <Icon Name="Icons.Spinner"/>
+                    <LoadingSpinner/> 
                 </Loading>
                 <Failed>
                     <Icon Name="Icons.X"/>@Loc["Error"]
diff --git a/Iceshrimp.Frontend/Pages/Settings/Profile.razor b/Iceshrimp.Frontend/Pages/Settings/Profile.razor
index a6394364..b7adfaa7 100644
--- a/Iceshrimp.Frontend/Pages/Settings/Profile.razor
+++ b/Iceshrimp.Frontend/Pages/Settings/Profile.razor
@@ -151,7 +151,7 @@
                     <Icon Name="Icons.FloppyDisk"/>@Loc["Save"]
                 </Initial>
                 <Loading>
-                    <Icon Name="Icons.Spinner"/>
+                    <LoadingSpinner />
                 </Loading>
                 <Failed>
                     <Icon Name="Icons.X"/>@Loc["Error"]
@@ -164,7 +164,7 @@
     }
     @if (State is State.Loading)
     {
-        <div>Loading!</div>
+        <div class="loading"><LoadingSpinner Scale="2" /></div>
     }
 </div>
 
diff --git a/Iceshrimp.Frontend/Pages/Settings/Profile.razor.css b/Iceshrimp.Frontend/Pages/Settings/Profile.razor.css
index 3e7edb61..83b72366 100644
--- a/Iceshrimp.Frontend/Pages/Settings/Profile.razor.css
+++ b/Iceshrimp.Frontend/Pages/Settings/Profile.razor.css
@@ -4,6 +4,13 @@
     align-items: center;
 }
 
+.loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 25vh;
+}
+
 .button {
     padding: 0.75rem;
     margin: 0.2rem;
diff --git a/Iceshrimp.Frontend/Pages/SingleNote.razor b/Iceshrimp.Frontend/Pages/SingleNote.razor
index 55a6f9b9..57964dc2 100644
--- a/Iceshrimp.Frontend/Pages/SingleNote.razor
+++ b/Iceshrimp.Frontend/Pages/SingleNote.razor
@@ -134,7 +134,7 @@
 }
 @if (_componentState == State.Loading)
 {
-    <div>Loading</div>
+    <div class="loading"><LoadingSpinner Scale="2" /></div>
 }
 @if (_componentState == State.NotFound)
 {
diff --git a/Iceshrimp.Frontend/Pages/SingleNote.razor.css b/Iceshrimp.Frontend/Pages/SingleNote.razor.css
index 9d54bffd..687d87e2 100644
--- a/Iceshrimp.Frontend/Pages/SingleNote.razor.css
+++ b/Iceshrimp.Frontend/Pages/SingleNote.razor.css
@@ -10,6 +10,13 @@
     border-radius: 0.75rem;
 }
 
+.loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 25vh;
+}
+
 .descendants {
     display: flex;
     flex-direction: column;