mjasin/Nexus.Reader
1
0
Fork 0
Code Issues 9 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fix(ingest): implement beautiful upload loading state and fix button loading spinner visibility

Browse Source
This commit is contained in:
Marek Jaisński
2026-06-01 18:18:19 +02:00
parent bf31effd36
commit f81b2acc40
2 changed files with 19 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/NexusReader.UI.Shared/Components/Organisms/BookIngestionModal.razor
+11 -4
View File
@@ -33,8 +33,15 @@
<p>Scanning metadata...</p> <p>Scanning metadata...</p>
</div> </div>
</div> </div>
<div class="ingesting-state shimmer" style="@(IsIngesting && !IsIndexing ? "display:flex;" : "display:none;")">
<div class="shimmer-content">
<div class="spinner"></div>
<p>Saving book to library...</p>
</div>
</div>
<div class="verification-state" style="@(IsVerifying && !IsParsing && !IsIndexing ? "display:flex;" : "display:none;")"> <div class="verification-state" style="@(IsVerifying && !IsParsing && !IsIndexing && !IsIngesting ? "display:flex;" : "display:none;")">
@if (Metadata != null) @if (Metadata != null)
{ {
<div class="verification-layout"> <div class="verification-layout">
@@ -70,8 +77,8 @@
<div class="actions"> <div class="actions">
<NexusButton Class="btn-secondary" OnClick="Reset" Disabled="IsIngesting">Back</NexusButton> <NexusButton Class="btn-secondary" OnClick="Reset" Disabled="IsIngesting">Back</NexusButton>
<NexusButton Class="@($"btn-primary {(IsIngesting ? "btn-loading" : "")}")" <NexusButton Class="@($"btn-primary {(IsIngesting ? "btn-loading" : "")}")"
OnClick="SaveToLibrary" OnClick="SaveToLibrary"
Disabled="IsIngesting"> Disabled="IsIngesting">
@(IsIngesting ? "" : "Save to Library") @(IsIngesting ? "" : "Save to Library")
</NexusButton> </NexusButton>
</div> </div>
@@ -79,7 +86,7 @@
</div> </div>
<div class="upload-state @(_isDragging ? "drag-over" : "")" <div class="upload-state @(_isDragging ? "drag-over" : "")"
style="@(!IsParsing && !IsVerifying && !IsIndexing ? "display:flex;" : "display:none;")" style="@(!IsParsing && !IsVerifying && !IsIndexing && !IsIngesting ? "display:flex;" : "display:none;")"
@ondragenter="OnDragEnter" @ondragenter="OnDragEnter"
@ondragleave="OnDragLeave"> @ondragleave="OnDragLeave">
<div class="drop-zone"> <div class="drop-zone">
src/NexusReader.UI.Shared/Components/Organisms/BookIngestionModal.razor.css
+8 -5
View File
@@ -118,8 +118,9 @@
z-index: 10; z-index: 10;
} }
/* Parsing State */ /* Parsing and Ingesting States */
.parsing-state { .parsing-state,
.ingesting-state {
flex: 1; flex: 1;
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -158,7 +159,8 @@
filter: drop-shadow(0 0 8px rgba(0, 255, 153, 0.3)); filter: drop-shadow(0 0 8px rgba(0, 255, 153, 0.3));
} }
.parsing-state p { .parsing-state p,
.ingesting-state p {
color: var(--nexus-text); color: var(--nexus-text);
font-family: var(--nexus-font-mono, monospace); font-family: var(--nexus-font-mono, monospace);
font-size: 0.9rem; font-size: 0.9rem;
@@ -371,10 +373,11 @@
position: absolute; position: absolute;
width: 20px; width: 20px;
height: 20px; height: 20px;
border: 2px solid rgba(0, 0, 0, 0.1); border: 2px solid rgba(255, 255, 255, 0.2);
border-top-color: #000; border-top-color: var(--nexus-neon, #00ffaa);
border-radius: 50%; border-radius: 50%;
animation: spin 0.8s linear infinite; animation: spin 0.8s linear infinite;
filter: drop-shadow(0 0 4px var(--nexus-neon, #00ffaa));
} }
/* Indexing State */ /* Indexing State */