Rephl3x/Magent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show a clear spinner while request searches are working
Magent CI/CD / verify (push) Successful in 2m0s
Details
Magent CI/CD / deploy-prod (push) Skipped
Details
Magent CI/CD / deploy-beta (push) Skipped
Details

Browse Source
This commit is contained in:
Assclaw
2026-09-11 23:11:14 +12:00
parent 8734f461bb
commit f57058eb26
2 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/requests/[id]/LatestActivity.tsx
+2 -2
View File
@@ -57,7 +57,7 @@ export default function LatestActivity({ operation, besideDownload, onDismiss }:
<div className={`request-overview-block latest-activity ${besideDownload ? 'beside-download' : 'full-row'}`}> <div className={`request-overview-block latest-activity ${besideDownload ? 'beside-download' : 'full-row'}`}>
<button ref={trigger} type="button" className="latest-activity-trigger" onClick={() => setOpen(true)} aria-haspopup="dialog" aria-expanded={open}> <button ref={trigger} type="button" className="latest-activity-trigger" onClick={() => setOpen(true)} aria-haspopup="dialog" aria-expanded={open}>
<span className="latest-activity-heading"><span className="request-overview-label">Latest activity</span><span className={`latest-activity-badge is-${operation.status}`}>{status}</span></span> <span className="latest-activity-heading"><span className="request-overview-label">Latest activity</span><span className={`latest-activity-badge is-${operation.status}`}>{status}</span></span>
<span className="latest-activity-message" role="status">{currentStep}</span> <span className="latest-activity-message" role="status">{working && <span className="activity-spinner" aria-hidden="true" />}{currentStep}</span>
{progress} {progress}
<span className="latest-activity-more">View progress</span> <span className="latest-activity-more">View progress</span>
</button> </button>
@@ -68,7 +68,7 @@ export default function LatestActivity({ operation, besideDownload, onDismiss }:
<button type="button" onClick={() => setOpen(false)}>Close</button> <button type="button" onClick={() => setOpen(false)}>Close</button>
</header> </header>
<div className="activity-current" role="status" aria-live="polite" aria-atomic="true"> <div className="activity-current" role="status" aria-live="polite" aria-atomic="true">
<p className="activity-current-step">{currentStep}</p> <p className="activity-current-step">{working && <span className="activity-spinner" aria-hidden="true" />}{currentStep}</p>
{progress} {progress}
<p className="activity-next-step">{nextStep}</p> <p className="activity-next-step">{nextStep}</p>
</div> </div>
frontend/app/requests/[id]/latest-activity.css
+5
View File
@@ -28,3 +28,8 @@
.activity-process.is-error > span { background: #e6b86c; } .activity-process.is-error > span { background: #e6b86c; }
@keyframes activity-process-slide { from { transform: translateX(0); } to { transform: translateX(185%); } } @keyframes activity-process-slide { from { transform: translateX(0); } to { transform: translateX(185%); } }
@media (prefers-reduced-motion: reduce) { .activity-process.is-working > span { animation: none; width: 100%; opacity: .65; } } @media (prefers-reduced-motion: reduce) { .activity-process.is-working > span { animation: none; width: 100%; opacity: .65; } }
.activity-spinner { display: inline-block; width: 28px; height: 28px; flex: 0 0 28px; border: 3px solid #ffffff26; border-top-color: var(--ops-accent, #83d7f7); border-right-color: var(--ops-accent, #83d7f7); border-radius: 50%; animation: activity-spinner-turn .8s linear infinite; }
.activity-current-step, .latest-activity .latest-activity-message { display: flex; align-items: center; gap: 12px; }
@keyframes activity-spinner-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .activity-spinner { animation: none; } }