Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#326 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@g-k-s-03 đang làm issue này rồi.

Từ ngày 9/10/2026.

  • #327 của @g-k-s-03 — đang mở

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
78/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
javascript, react, tailwindcss
Lĩnh vực
frontend

Hướng nghiên cứu

Bắt đầu từ src/components/Orgexplorerskeletons.jsx, nơi các hàm trợ giúp Bar, Box, Circle và Pill đang mã hóa cứng bg-neutral-800, bg-neutral-900, bg-neutral-950 và border-neutral-800/divide-neutral-800. Tìm các biến theme tương ứng trong src/styles/global.css rồi thay các class đó bằng chúng. Hoàn thành khi chế độ sáng hiển thị placeholder sáng trên cả sáu trang skeleton, còn chế độ tối trông không đổi, đã kiểm tra bằng mắt.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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

Ngôn ngữ chính
JavaScript
Star
42
Fork
124
Merge trung bình
2 ngày 22 giờ
Pull request đã merge (30 ngày)
10

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của AOSSIE-Org/OrgExplorer

Tất cả issue của AOSSIE-Org/OrgExplorer

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.