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
@@ -34,7 +34,14 @@
</div>
</div>
<div class="verification-state" style="@(IsVerifying && !IsParsing && !IsIndexing ? "display:flex;" : "display:none;")">
<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 && !IsIngesting ? "display:flex;" : "display:none;")">
@if (Metadata != null)
{
<div class="verification-layout">
@@ -70,8 +77,8 @@
<div class="actions">
<NexusButton Class="btn-secondary" OnClick="Reset" Disabled="IsIngesting">Back</NexusButton>
<NexusButton Class="@($"btn-primary {(IsIngesting ? "btn-loading" : "")}")"
OnClick="SaveToLibrary"
Disabled="IsIngesting">
OnClick="SaveToLibrary"
Disabled="IsIngesting">
@(IsIngesting ? "" : "Save to Library")
</NexusButton>
</div>
@@ -79,7 +86,7 @@
</div>
<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"
@ondragleave="OnDragLeave">
<div class="drop-zone">
src/NexusReader.UI.Shared/Components/Organisms/BookIngestionModal.razor.css
+8 -5
View File
@@ -118,8 +118,9 @@
z-index: 10;
}
/* Parsing State */
.parsing-state {
/* Parsing and Ingesting States */
.parsing-state,
.ingesting-state {
flex: 1;
display: flex;
justify-content: center;
@@ -158,7 +159,8 @@
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);
font-family: var(--nexus-font-mono, monospace);
font-size: 0.9rem;
@@ -371,10 +373,11 @@
position: absolute;
width: 20px;
height: 20px;
border: 2px solid rgba(0, 0, 0, 0.1);
border-top-color: #000;
border: 2px solid rgba(255, 255, 255, 0.2);
border-top-color: var(--nexus-neon, #00ffaa);
border-radius: 50%;
animation: spin 0.8s linear infinite;
filter: drop-shadow(0 0 4px var(--nexus-neon, #00ffaa));
}
/* Indexing State */