Use loading svg of etherpad

[Gared]

No description provided.

[qodo-code-review]

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

[qodo-free-for-open-source-projects]

Review Summary by Qodo

Use Etherpad brand loading animation instead of custom SVG
✨ Enhancement

Walkthroughs

Description

• Replace custom spinner SVG with Etherpad brand loading animation
• Increase default spinner size from 24 to 128 pixels
• Wrap spinner in Card component for improved styling
• Integrate LoadingSpinner into home page instance table
• Remove inline SVG implementation in favor of image asset

Diagram

flowchart LR
  A["Custom SVG Spinner"] -->|Replace with| B["Brand.svg Image"]
  C["Size: 24px"] -->|Increase to| D["Size: 128px"]
  E["Plain div container"] -->|Wrap in| F["Card Component"]
  G["Home page loading state"] -->|Integrate| H["LoadingSpinner component"]

Loading

File Changes

1. src/components/ui/Spinner.tsx ✨ Enhancement +9/-20

Replace SVG spinner with Etherpad brand animation

• Replaced custom SVG spinner with brand.svg image asset
• Increased default size parameter from 24 to 128
• Wrapped spinner content in Card component for styling
• Removed cn utility import and animate-spin class
• Removed gray-900 background color from container
• Restructured loading text layout with centered div

src/components/ui/Spinner.tsx

---

2. src/pages/home.tsx ✨ Enhancement +4/-1

Integrate LoadingSpinner into home page

• Added LoadingSpinner component import
• Replaced plain "Loading..." text with LoadingSpinner component
• Updated loading state UI in instances table

src/pages/home.tsx

---

[qodo-free-for-open-source-projects]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0) 🎨 UX issues (0) 🔗 Cross-repo conflicts (0)

1. Unused className parameter ✓ Resolved 🐞 Bug ≡ Correctness

Description

LoadingSpinner destructures className but never uses it, which violates the repo’s
noUnusedParameters setting and will fail TypeScript compilation. This was previously used on the
` but is now dropped during the refactor to `.

Code

src/components/ui/Spinner.tsx[R10-14]

Evidence

The repository is configured to fail compilation on unused parameters, and className is currently
unused after destructuring in LoadingSpinner.

src/components/ui/Spinner.tsx[10-22]
tsconfig.json[22-26]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`LoadingSpinner` destructures `className` but does not apply it to any element. With `noUnusedParameters: true`, this triggers a TypeScript compile error.
### Issue Context
The project enables strict unused checks in `tsconfig.json`, so unused function parameters block builds.
### Fix Focus Areas
- src/components/ui/Spinner.tsx[10-22]
- tsconfig.json[22-26]
### Suggested fix
Either:
1) Forward `className` to a rendered element (e.g., `<img className={className} ...>` or apply it to the `<Card>`), or
2) Remove `className` from the destructuring (and possibly from the props type) if you don’t want it supported anymore.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

2. SVG props on img ✓ Resolved 🐞 Bug ≡ Correctness

Description

ISVGProps extends SVGProps, but the component renders an HTML ` and spreads ...props` onto it;
this is not type-compatible under strict TS (e.g., ref/attribute types differ) and is likely to
fail type-checking. It also suggests callers might pass SVG-only attributes that will be
meaningless/invalid on an ``.

Code

src/components/ui/Spinner.tsx[R5-18]

Evidence

ISVGProps is explicitly defined as SVGProps, yet those props are spread onto an `` element; the
repo uses strict TypeScript settings, making this mismatch a likely compile error.

src/components/ui/Spinner.tsx[1-23]
tsconfig.json[22-26]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The component’s props type is SVG-specific (`SVGProps<SVGSVGElement>`) but the rendered element is `<img>`. Spreading `...props` onto `<img>` is not type-safe and will likely fail the project’s strict TypeScript checks.
### Issue Context
This component used to render an `<svg>`, but it now renders `<img src='/brand.svg' ...>`. The prop type wasn’t updated accordingly.
### Fix Focus Areas
- src/components/ui/Spinner.tsx[1-23]
- tsconfig.json[22-26]
### Suggested fix
Update the props type to image attributes, e.g.:
- Replace `SVGProps<SVGSVGElement>` with `React.ImgHTMLAttributes<HTMLImageElement>` (or `ComponentPropsWithoutRef<'img'>`).
- Remove the `SVGProps` import.
- Ensure `className` is forwarded to either `<img>` or `<Card>` (and avoid unused destructuring).
Example shape:

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

[Gared]

@dependabot please fix the issues mentioned here in this PR