Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

enhancement: Add Next.js loading.tsx skeleton for country leaderboard pages

Offen Anfängerfreundlich
#276 2 Kommentare 0 Reaktionen 1 zugewiesene Person Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

@virtuallynaman arbeitet bereits daran.

Seit 28.10.2026.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
82/100
Issue-Typ
Feature
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Bereich
frontend, web-dev

Rechercherichtung

Lies src/app/leaderboard/[country] und das vorhandene DashboardSkeleton, um das Layout der Länderseiten nachzubilden. Erstelle die beiden angeforderten loading.tsx-Dateien und füge AppHeader, ein passendes Tabellen- oder Karten-Skeleton sowie AppFooter ein; fertig ist die Aufgabe, wenn beide Leaderboard-Routen während des Ladens der Daten das Lade-Layout anzeigen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

beginner friendly easy enhancement good first issue nextjs ui

When navigating between countries in /leaderboard/[country], there is no route-level loading.tsx file. Next.js App Router uses loading.tsx to instantly stream an instant loading state during server rendering.

Motivation

Adding a route-level loading.tsx with skeleton cards prevents perceived lag and layout shift during ISR/SSR country data loading.

Tasks
  • Create src/app/leaderboard/[country]/loading.tsx and src/app/leaderboard/loading.tsx.
  • Render AppHeader, a table skeleton or cards skeleton matching DashboardSkeleton, and AppFooter.
Files to Check
  • src/app/leaderboard/[country]/loading.tsx
  • src/app/leaderboard/loading.tsx

[!TIP]
🚀 Want to contribute?
Comment assign me to be automatically assigned to this issue via our GitHub Actions bot. Happy coding! ✨

Vorherrschende Sprache
TypeScript
Sterne
31
Forks
25
Ø Merge
10 Std. 4 Min.
Gemergte PRs (30 T.)
29

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus O2sa/DevImpact

Alle Issues in O2sa/DevImpact

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

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