jargonsdev / jargonsdev/jargons.dev

Add Loading Component to Recent Searches Island

Offen
#31 5 Kommentare 0 Reaktionen 1 zugewiesene Person Auf GitHub ansehen

@amiabl-programr arbeitet bereits daran.

Seit 02.9.2024.

:arrow_upper_right: medium priority :sparkles: enhancement
Vorherrschende Sprache
MDX
Sterne
56
Forks
45
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

The Recent Searches island component currently lacks a loading state, causing the UI to flicker when content is loaded. This issue aims to add a loading component to improve user experience.

[screencast-localhost_4321-2024.04.05-12_20_32.webm](https://github.com/babblebey/jargons.dev/assets/25631971/fff66330-e0d3-426d-b27a-77183f70a66f)

#### Tasks
1. **Implement Loading State:** Add a loading state to the Recent Searches island component that displays a placeholder for the section title and a set of placeholders for the list of recent searched items.
2. **Style Loading Component:** Style the loading component to visually indicate that content is loading. Consider using placeholders that mimic the size and layout of the actual content.
3. **Integrate Loading Component:** Integrate the loading component into the Recent Searches island so that it is displayed while the actual content is being fetched.

#### Related Files
- `recent-searches.jsx` component in the `src/components/islands` directory

#### Acceptance Criteria
- The loading component is displayed when the Recent Searches island is loading.
- The loading component accurately represents the layout of the actual content.

#### Additional Notes
- Ensure that the loading component is visually appealing and informative.
- Consider using animations or transitions to indicate the loading process.

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.