feat(skeleton): add skeleton loading to 10 views with missing/poor loading states#201
Conversation
…oading states - APICredentialHealthDashboard: has isLoading prop but uses isLoading state for main component. Now returns skeleton. - NodeManager: added isLoading prop and skeleton component. - AgentHealthGrid: added isLoading prop and skeleton component. - SessionExplorer: added isLoading prop and skeleton component. - EnvironmentDriftDetector: added isLoading prop and skeleton component. - SupportTicketDashboard: added isLoading prop and skeleton component - APIRateLimitManager: added isLoading prop and skeleton component - DataCatalog: added isLoading prop and skeleton component - SecurityAuditTrail: added isLoading prop and skeleton component - TokenUsageOptimizer: added isLoading prop and skeleton component All skeleton components use appropriate Skeleton variants: - `rect` for blocks/rectangles like cards and charts - `text` for text-like content with proper height - `circle` for circular elements like avatars icons Each skeleton matches the content shape of its corresponding view: - APICredentialHealthDashboard: Header with stats, credential cards with alerts, filter tabs, grid - NodeManager: Header with node cards, detail panel, stats bar - AgentHealthGrid: Header with summary bar, filters, grid - SessionExplorer: Header with filters, session list - EnvironmentDriftDetector: Header with tabs, summary cards, table - SupportTicketDashboard: Header with tabs, ticket queue, detail panel - APIRateLimitManager: Header with tabs, stats, chart area, side panel - DataCatalog: Header with tabs, stats, search, dataset grid - SecurityAuditTrail: Header with tabs, stats, filters, event list - TokenUsageOptimizer: Header with tabs, stats, chart area, agent list
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 020772d3e6
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| if (isLoading) { | ||
| return <APICredentialHealthDashboardSkeleton /> |
There was a problem hiding this comment.
The new isLoading early return runs before several useMemo calls in APICredentialHealthDashboard, so renders with isLoading=true execute fewer hooks than renders with isLoading=false. If the parent flips loading to false after data arrives, React will hit a hook-order mismatch and throw at runtime. Keep all hooks unconditional (for example, move the loading branch after hook declarations).
Useful? React with 👍 / 👎.
| if (isLoading) { | ||
| return <AgentHealthGridSkeleton />; |
There was a problem hiding this comment.
This loading guard returns before the component's useEffect hook, which makes hook execution depend on isLoading. When isLoading changes between renders, React can throw a hooks-order error (rendered more/fewer hooks than expected) and the view will break instead of transitioning from skeleton to data.
Useful? React with 👍 / 👎.
| if (isLoading) { | ||
| return <SessionExplorerSkeleton />; |
There was a problem hiding this comment.
The added loading return is placed before a useMemo hook in SessionExplorer, so the hook list differs between loading and non-loading renders. In the common path where isLoading starts true and later turns false, React will detect inconsistent hook order and throw, preventing the page from rendering.
Useful? React with 👍 / 👎.
| module.exports = { compilerOptions: { "incremental": true } } | ||
| {"compilerOptions": {"incremental": true}} |
There was a problem hiding this comment.
These appended lines are not valid tsconfig.json syntax and make the config unparsable for TypeScript/Vite tooling. As a result, commands that read apps/web-next/tsconfig.json (such as tsc/build flows) will fail before compilation, which blocks the web-next build pipeline.
Useful? React with 👍 / 👎.
1 participant
Complete skeleton loading quality audit for 10 views in Horizon UI.
Views Updated
Implementation Details
Build Verification
Co-authored-by: Wes [email protected]