Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

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

Ouverte Adaptée aux débutants
#276 2 commentaires 0 réactions 1 personne assignée Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

@virtuallynaman y travaille déjà.

Depuis le 28/10/2026.

Évaluation

Difficulté
2/5
Temps estimé
1-3 heures
Accessibilité débutants
82/100
Type d'issue
Fonctionnalité
Clarté
Clairement spécifiée
Activité
Active
Stack technique
next.js, react, typescript
Domaine
frontend, web-dev

Piste de recherche

Lisez src/app/leaderboard/[country] et le DashboardSkeleton existant pour reproduire la mise en page des pages de pays. Créez les deux fichiers loading.tsx demandés et incluez AppHeader, un skeleton de tableau ou de carte correspondant, ainsi que AppFooter ; le travail est terminé lorsque les deux routes du leaderboard affichent la mise en page de chargement pendant le chargement des données.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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! ✨

Langage dominant
TypeScript
Étoiles
31
Forks
25
Merge moyen
10 h 4 min
PR mergées (30 j)
29

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de O2sa/DevImpact

Toutes les issues de O2sa/DevImpact

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.