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

2025-02-09 16:48:22 +01:00 · 2025-02-09 16:48:22 +01:00 · c13ae77a8d
commit c13ae77a8d
parent 1b84d3b87e
30 changed files with 111 additions and 21 deletions
--- 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"/>
--- 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
        {
--- 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)
 {
--- a/Iceshrimp.Frontend/Components/FollowRequestList.razor.css
+++ b/Iceshrimp.Frontend/Components/FollowRequestList.razor.css
@ -6,3 +6,10 @@
    overflow-x: auto;
    padding: 0.5rem;
 }
+
+.loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 25vh;
+}
--- a/Iceshrimp.Frontend/Components/LoadingSpinner.razor
+++ 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;
+}
--- a/Iceshrimp.Frontend/Components/LoadingSpinner.razor.css
+++ 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;
+}
--- 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)
 {
--- 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;
+}
--- 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)
 {
--- 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;
+}
--- 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)
--- a/Iceshrimp.Frontend/Components/NotificationList.razor.css
+++ b/Iceshrimp.Frontend/Components/NotificationList.razor.css
@ -15,3 +15,11 @@
    padding-right: 0.5rem;
    width: 100%;
 }
+
+.loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 25vh;
+    margin: auto;
+}
--- 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
        {
--- 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
        {
--- 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
        {
--- 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;
    }
--- 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)
 {
--- 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;
--- 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)
    {
--- 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;
--- 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>
    }

--- 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)
 {
--- 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;
--- 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>
--- 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>
--- 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"]
--- 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>

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