[BUG]: Loading skeletons use hardcoded dark colors and appear as dark blocks in light mode on every page
维护者通常 2 天内回复
评估
- 难度
- 2/5
- 预计耗时
- 1-3 小时
- 新手友好度
- 78/100
- Issue 类型
- 缺陷
- 描述清晰度
- 描述清楚
- 活跃度
- 活跃
- 技术栈
- javascript, react, tailwindcss
- 领域
- frontend
调研方向
从 src/components/Orgexplorerskeletons.jsx 开始，其中 Bar、Box、Circle 和 Pill 辅助函数硬编码了 bg-neutral-800、bg-neutral-900、bg-neutral-950 以及 border-neutral-800/divide-neutral-800。在 src/styles/global.css 中找到对应的主题变量，并将这些类替换为它们。完成标准是：浅色模式下六个骨架屏页面都显示浅色占位符，深色模式外观保持不变，并经过视觉检查。
由索引模型根据 Issue 内容生成。
描述
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:
- Run the app locally (
npm run dev) and explore any organization (e.g.AOSSIE-Org). - Switch to light mode using the theme toggle in the navbar.
- 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)toif (true)on the skeleton line of the page component (e.g.OverviewPage.jsx, line ~41), which is how I captured the screenshots.
- Observe that the skeleton is made of dark blocks on a white background.
- 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
- 主要语言
- JavaScript
- 星标
- 44
- 派生
- 133
- 平均合并
- 4 天 1 小时
- 30 天内合并 PR
- 18
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
AOSSIE-Org/OrgExplorer 的其他 Issue
-
[BUG]: respect granularity when limiting analytics time-series buckets可能已有人在做 @Sparsh2105 于 4 天前认领。 未关闭bug
难度 2/5 1-3 小时 新手友好度 82/100
AOSSIE-Org/OrgExplorer#333 · 3 条评论 ·
维护者通常 2 天内回复
-
Language Filter Dropdown Silently Truncates Languages可能已有人在做 @PrithvijitBose 于 13 天前认领。 未关闭bug
难度 1/5 1 小时以内 新手友好度 85/100
AOSSIE-Org/OrgExplorer#289 · 1 条评论 ·
维护者通常 2 天内回复
-
[BUG]: computeHealthScore: NaN when repo.open_issues_count is missing and computeHealthScore: NaN when repo.pushed_at is missing or invalid可能已有人在做 @PrithvijitBose 于 13 天前认领。 未关闭bug
难度 2/5 1-3 小时 新手友好度 78/100
AOSSIE-Org/OrgExplorer#287 · 2 条评论 ·
维护者通常 2 天内回复
-
[FEATURE]: Make organization filter dropdown label uniform ("All Organizations")可能已有人在做 @RounakKumarAgarwal 于 14 天前认领。 未关闭enhancement
难度 1/5 1 小时以内 新手友好度 92/100
AOSSIE-Org/OrgExplorer#281 ·
维护者通常 2 天内回复
-
[BUG]: Analytics page keeps the previous organization's pull request data after exploring a new org可能已有人在做 @amanbn8 于 14 天前认领。 未关闭bug
难度 1/5 1 小时以内 新手友好度 90/100
AOSSIE-Org/OrgExplorer#272 · 3 条评论 · 已指派 1 人 ·
维护者通常 2 天内回复
查看 AOSSIE-Org/OrgExplorer 的全部 Issue
相似的 Issue
-
Four problem loader browser tests fail on Windows可能已有人在做 @Patriciaath999 今天认领。 未关闭
难度 2/5 1-3 小时 新手友好度 88/100
维护者通常 1 天内回复
-
bug
难度 2/5 1-3 小时 新手友好度 85/100
juice-shop/juice-shop#3686 ·
维护者通常 1 天内回复
-
bug
难度 2/5 1-3 小时 新手友好度 72/100
ScottKirvan/GOMAC#56 ·
-
area:install bug needs-triage
难度 2/5 1-3 小时 新手友好度 68/100
维护者通常 2 天内回复
-
难度 2/5 1-3 小时 新手友好度 62/100
维护者通常 1 天内回复