diff --git a/frontend/app/requests/[id]/LatestActivity.tsx b/frontend/app/requests/[id]/LatestActivity.tsx index 01c6bad..a1ff086 100644 --- a/frontend/app/requests/[id]/LatestActivity.tsx +++ b/frontend/app/requests/[id]/LatestActivity.tsx @@ -57,7 +57,7 @@ export default function LatestActivity({ operation, besideDownload, onDismiss }:
@@ -68,7 +68,7 @@ export default function LatestActivity({ operation, besideDownload, onDismiss }:
-

{currentStep}

+

{working &&

{progress}

{nextStep}

diff --git a/frontend/app/requests/[id]/latest-activity.css b/frontend/app/requests/[id]/latest-activity.css index 23354f2..f355963 100644 --- a/frontend/app/requests/[id]/latest-activity.css +++ b/frontend/app/requests/[id]/latest-activity.css @@ -28,3 +28,8 @@ .activity-process.is-error > span { background: #e6b86c; } @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; } } + +.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; } }