[frontend/components] Add proper loading spinner to all loading indicators

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"/>

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
         {

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)
 {

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;
 }

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;
+}

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;
+}

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)
 {

Iceshrimp.Frontend/Components/NoteLikeDetails.razor.css

@@ -0,0 +1,5 @@
+.loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

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)
 {

Iceshrimp.Frontend/Components/NoteRenoteDetails.razor.css

@@ -0,0 +1,5 @@
+.loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

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)

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;
 }

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
         {

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
         {

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
         {

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;
     }

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)
 {

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;

Iceshrimp.Frontend/Pages/Login.razor

@@ -31,7 +31,7 @@
 
     @if (Loading)
     {
-        <span>Loading!</span>
+        <span class="loading"><LoadingSpinner Scale="2"/></span>
     }
     @if (Failure)
     {

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;

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>
     }
 

Iceshrimp.Frontend/Pages/ProfileView.razor

@@ -120,7 +120,7 @@
 }
 @if (_loading)
 {
-    <div>loading</div>
+    <div class="loading"><LoadingSpinner Scale="2" /></div>
 }
 @if (_notFound)
 {

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;

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>

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>

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"]

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>
 

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;

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)
 {

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;