Skip to content

fix(ui): show spinner on Run Scan button while request is in flight#209

Open
Maqbool61 wants to merge 1 commit into
NovaCode37:mainfrom
Maqbool61:fix/run-scan-spinner
Open

fix(ui): show spinner on Run Scan button while request is in flight#209
Maqbool61 wants to merge 1 commit into
NovaCode37:mainfrom
Maqbool61:fix/run-scan-spinner

Conversation

@Maqbool61

Copy link
Copy Markdown
Contributor

Closes #199.

Problem

When clicking "Run Scan", there was no visual feedback during the brief
window while the scan was being created. App.tsx called
setScanStatus('running') and setView('scanning') simultaneously
before await startScan() resolved, switching the view to the scanning
screen before any spinner was visible. The IdleView quick-scan button
had no spinner at all.

What changed

frontend/src/components/App.tsx
Added isStarting boolean state that is true only while
startScan() is in flight. setView('scanning') and
setScanStatus('running') now fire after the request resolves, not
before. isStarting is passed down to both Sidebar and IdleView.

frontend/src/components/Sidebar.tsx
Accepts isStarting prop (optional, defaults false). The Run Scan
button is disabled and shows the Loader2 spinner when either
isStarting or isRunning is true. No new imports — Loader2 was
already present.

frontend/src/components/views/IdleView.tsx
Accepts isStarting prop (optional, defaults false). Added Loader2
to the lucide import. The submit button is disabled and shows a spinner
while isStarting is true.

Tests

221 passed, 19 warnings

@Maqbool61 Maqbool61 requested a review from NovaCode37 as a code owner July 13, 2026 08:50
@NovaCode37

Copy link
Copy Markdown
Owner

Thanks for this — the spinner on Run Scan is a nice UX fix and the isStarting handling looks good. 🙌

One blocker before merging: this branch drops the ?target= URL handler in App.tsx (the urlScanStarted useEffect, plus the MODULE_MAP, detectScanType, and normalizeScanTarget imports). That effect was added for the new browser extension — it lets the extension hand a target to the web UI and auto-start a scan, and the extension (currently in review on Firefox Add-ons) depends on it. Merging as-is would remove that feature.

Could you rebase on the latest main and keep that useEffect alongside your spinner change? They live in different spots and don't conflict — the spinner touches handleScan, the extension handler is a separate mount effect right after it. Once it's back, happy to merge. Thanks!

@Maqbool61

Copy link
Copy Markdown
Contributor Author

Thanks for this — the spinner on Run Scan is a nice UX fix and the isStarting handling looks good. 🙌

One blocker before merging: this branch drops the ?target= URL handler in App.tsx (the urlScanStarted useEffect, plus the MODULE_MAP, detectScanType, and normalizeScanTarget imports). That effect was added for the new browser extension — it lets the extension hand a target to the web UI and auto-start a scan, and the extension (currently in review on Firefox Add-ons) depends on it. Merging as-is would remove that feature.

Could you rebase on the latest main and keep that useEffect alongside your spinner change? They live in different spots and don't conflict — the spinner touches handleScan, the extension handler is a separate mount effect right after it. Once it's back, happy to merge. Thanks!

Working on fixing those issues

Closes NovaCode37#199.

App.tsx set setScanStatus('running') and setView('scanning')
simultaneously before await startScan() resolved, so the view switched
to the scanning screen before any spinner was visible. IdleView had no
spinner at all on its submit button.

Changes
-------
App.tsx
  Added isStarting state (true only while startScan() is in flight).
  setView('scanning') and setScanStatus('running') now fire after the
  request resolves, not before. isStarting is passed to both Sidebar
  and IdleView.

Sidebar.tsx
  Accepts isStarting prop (optional, defaults false). Button is
  disabled and shows Loader2 spinner when isStarting OR isRunning.
  No new imports needed — Loader2 was already present.

IdleView.tsx
  Accepts isStarting prop (optional, defaults false). Added Loader2
  import. Submit button is disabled and shows Loader2 spinner while
  isStarting is true.
@Maqbool61 Maqbool61 force-pushed the fix/run-scan-spinner branch from ef9f6f5 to e5c9f7e Compare July 13, 2026 11:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Show a spinner on the Run Scan button while starting

2 participants