Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

[BUG]: Loading skeletons use hardcoded dark colors and appear as dark blocks in light mode on every page

Chiusa Adatta ai principianti
  • Qualcosa non va?
#326 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 3 giorni

@g-k-s-03 ci sta già lavorando.

Dal 9/10/2026.

  • #327 di @g-k-s-03 — integrata

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
78/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
javascript, react, tailwindcss
Ambito
frontend

Direzione di ricerca

Inizia da src/components/Orgexplorerskeletons.jsx, dove gli helper Bar, Box, Circle e Pill hanno hardcoded bg-neutral-800, bg-neutral-900, bg-neutral-950 e border-neutral-800/divide-neutral-800. Cerca le variabili di tema corrispondenti in src/styles/global.css e sostituisci le classi con quelle. È completato quando la modalità chiara mostra segnaposto chiari su tutte e sei le pagine skeleton e la modalità scura resta invariata, verificato visivamente.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

bug
Summary

The loading skeletons shown while a page is fetching data don't follow the active theme. In light mode, every page that uses a skeleton displays solid black / dark grey blocks on a white background, which looks broken and inconsistent with the rest of the light theme.

Root cause

All skeletons are defined in src/components/Orgexplorerskeletons.jsx and are built from four shared helper components (Bar, Box, Circle, Pill). These helpers use fixed dark-theme Tailwind classes instead of the theme variables used everywhere else in the app:

Class used Where
bg-neutral-800 Bar, Circle, Pill (the pulsing placeholder bars)
bg-neutral-900, border-neutral-800 Box (card containers)
divide-neutral-800 Row dividers in the Repository and Contributor skeleton tables
bg-neutral-950, border-neutral-800 Network graph placeholder canvas
border-neutral-800 Tab underline row in the Governance skeleton

Because these colors are hardcoded, they stay dark regardless of whether light or dark mode is active. The skeletons were introduced in #117.

Affected pages

I verified this on all six pages that render a skeleton, and all of them are affected:

Page Skeleton component Affected in light mode
Overview OverviewSkeleton Yes
Repositories RepositorySkeleton Yes
Contributors ContributorSkeleton Yes
Network NetworkSkeleton Yes
Analytics AnalyticsSkeleton Yes
Governance GovernanceSkeleton

Yes |

Impact
  • Every light-mode user sees dark blocks each time a page loads, for example when re-running an analysis with a PAT.
  • It makes light mode look unfinished, even though the rest of the UI themes correctly.
  • Dark mode is not affected.
Proposed fix

Replace the hardcoded classes in Orgexplorerskeletons.jsx with the existing theme variables, using the same Tailwind CSS-variable syntax already used elsewhere in the codebase (e.g. hover:bg-(--bg), text-(--text2)):

  • placeholder bars: bg-neutral-800 → bg-(--surface2)
  • card containers: bg-neutral-900 → bg-(--surface)
  • borders and dividers: border-neutral-800 / divide-neutral-800 → border-(--border) / divide-(--border)
  • network canvas: bg-neutral-950 → bg-(--bg)

The exact variables can be matched against src/styles/global.css, so dark mode keeps its current look while light mode gets matching light placeholders.

Scope
  • One file only: src/components/Orgexplorerskeletons.jsx
  • No layout, logic or behavior changes, only color classes
  • I'll verify the result visually in both light and dark mode on all six pages

I'd be happy to work on this if that's okay.

Steps to Reproduce:
  1. Run the app locally (npm run dev) and explore any organization (e.g. AOSSIE-Org).
  2. Switch to light mode using the theme toggle in the navbar.
  3. Trigger a page's loading state:
    • Naturally: add a PAT in Settings, go to Overview, enable network throttling (DevTools → Network → Slow 4G) and click "Connect PAT & Run". The skeleton appears while the analysis reloads.
    • Or, to keep it on screen for inspection: temporarily change if (loading) to if (true) on the skeleton line of the page component (e.g. OverviewPage.jsx, line ~41), which is how I captured the screenshots.
  4. Observe that the skeleton is made of dark blocks on a white background.
  5. Repeat on Repositories, Contributors, Network, Analytics and Governance: same result.

Expected: Skeleton placeholders should use light colors in light mode and dark colors in dark mode, matching the active theme.

Actual: Skeleton placeholders are always dark, regardless of theme.

###Screenshots:

Overview skeleton (light mode): dark blocks on a white page
Overview skeleton in light mode showing dark blocks
Repositories skeleton in light mode showing dark blocks
Skeleton in light mode showing dark blocks
Skeleton in light mode showing dark blocks

Lingua principale
JavaScript
Stelle
44
Fork
133
Merge medio
5g 5h
PR unite (30g)
27

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di AOSSIE-Org/OrgExplorer

Tutte le issue di AOSSIE-Org/OrgExplorer

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.