Replace Loader2 icon usages with LoadingState component for consistent loading UI #708

Summary

The YakShaver Desktop app UI uses an inconsistent loading icon in multiple places (Loader2). There is an existing reusable LoadingState component that should be used instead of directly rendering Loader2 in the UI. This change will standardize loading behavior and visuals across the app.

What to change

• Replace all occurrences of Loader2 (lucide or similar icon usage) with the existing LoadingState component.
• Ensure prop parity: LoadingState should accept the same props or be adapted so existing usages preserve sizing, margins, and animation (e.g., mr-2, h-4 w-4, animate-spin). If necessary, update LoadingState to accept className or size props and map them appropriately.
• Update unit/integration tests and snapshots that reference Loader2 where appropriate.
• Run the app and visually verify all loading indicators now use LoadingState and render consistently.

Why

The current codebase contains multiple repetitions of Loader2 (e.g., className="mr-2 h-4 w-4 animate-spin"), which leads to inconsistent loading visuals and duplicated implementation. Reusing LoadingState centralizes loader styling and behavior and reduces future maintenance.

Steps to reproduce (from code / video)

1. Open the repository in VS Code and search for Loader2 usage (e.g., occurrences of "Loader2" in JSX files).
2. Example reference captured from developer video at the following timestamp (see video below): you can see a JSX line: Loader2 className="mr-2 h-4 w-4 animate-spin" which indicates inline icon use next to a label.

Video reference

• Video: https://www.youtube.com/watch?v=DEVwhQE23J4
• Duration: 0:01:06 (66 seconds)
• Screenshot captured from video at 00:17 (local capture): /private/var/folders/t9/h28pkphn06g659vg_7zzrpkc0000gn/T/screenshot_loader2_17.png

Automated visual/context description (from captured screenshot)

The captured screenshot is a VS Code editor window with a JSX/TSX file open that shows an inline Loader2 usage with className="mr-2 h-4 w-4 animate-spin". The Loader2 is used immediately before a text label (a common pattern for showing a small spinning icon next to action text). The screenshot includes the file tree, terminal logs, and a right-side PR/notes pane.

Note: Attempted to upload the screenshot to the project portal failed due to authentication (upload returned 401). The screenshot is available locally at the path above if someone wants to re-capture or upload it.

Acceptance criteria

• All UI places that previously used Loader2 now use LoadingState.
• Visual appearance of loaders remains consistent across the app and matches designs.
• LoadingState is flexible enough to support previous sizing/margin/animation via props (className/size/options) so no visual regressions occur.
• Tests updated where applicable and CI passes.

Suggested implementation notes

• Search for "Loader2" in the codebase and create a migration PR that replaces each use with or similar.
• If LoadingState doesn't support direct className, add a prop to allow styling, e.g., and have LoadingState apply animate-spin internally.
• Update storybook/examples and snapshots.

Labels: enhancement, UI