fix(dashboard): Workflow runs loading state usage page

[scopsy]

What changed? Why was the change needed?

This PR addresses an issue on the Usage/Analytics page where charts displayed loading skeletons longer than necessary. In the previous PR (#9854), data fetching was split into multiple queries, but all charts continued to use a single, combined loading state. This meant charts would wait for all queries to resolve before rendering, even if their specific data was already available.

The change refactors the ChartsSection and individual chart components to use distinct loading states (isTrendsLoading, isWorkflowLoading) and error objects (trendsError, workflowError) based on the data each chart consumes. This ensures that charts render immediately once their specific data has loaded, improving perceived performance.

Screenshots

---

Slack Thread

 

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}

[netlify]

✅ Deploy preview added

Name	Link
🔨 Latest commit	cafcc4b
🔍 Latest deploy log	https://app.netlify.com/projects/dashboard-v2-novu-staging/deploys/696f9d6ce0818200080108f4
😎 Deploy Preview	https://deploy-preview-9868.dashboard-v2.novu-staging.co
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

Hey there and thank you for opening this pull request! 👋

We require pull request titles to follow specific formatting rules and it looks like your proposed title needs to be adjusted.

Your PR title is: fix(dashboard): Workflow runs loading state usage page

Requirements:

1. Follow the Conventional Commits specification
2. As a team member, include Linear ticket ID at the end: fixes TICKET-ID or include it in your branch name

Expected format: feat(scope): Add fancy new feature fixes NOV-123

Details:

PR title must end with 'fixes TICKET-ID' (e.g., 'fixes NOV-123') or include ticket ID in branch name

[coderabbitai]

Walkthrough

This change refactors the analytics dashboard to replace centralized loading and error state handling with granular per-chart loading and error tracking. The ChartsSection component signature is updated to accept separate isTrendsLoading, isWorkflowLoading, trendsError, and workflowError props instead of combined isLoading and error props. These props are then distributed to individual child components based on chart type. The analytics page is modified to pass chart-specific loading and error states directly to child components, removing the previous aggregation logic that combined multiple loading and error states into single values.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: fixing the workflow runs loading state behavior on the analytics/usage page by switching from combined to per-chart loading states.
Description check	✅ Passed	The description clearly explains what changed and why: charts were showing loading skeletons longer than needed because they used combined loading states instead of per-chart states, and this PR fixes it by using distinct loading/error states per chart.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}