fix(fe): make changelog non blocking resource

[jog1t]

Closes FRONT-873

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
rivet-inspector	Error			Nov 3, 2025 7:30pm

3 Skipped Deployments

Project	Deployment	Preview	Comments	Updated (UTC)
rivet-cloud	Ignored			Nov 3, 2025 7:30pm
rivet-site	Ignored	Preview		Nov 3, 2025 7:30pm
rivetkit-serverless	Skipped			Nov 3, 2025 7:30pm

[jog1t]

• fix(fe): beautify tabs in actor details #3309
• fix(fe): make changelog non blocking resource #3308 👈 (View in Graphite)
• fix(fe): remove stickiness of headers #3307
• docs: use correct port in examples #3306
• fix(fe): show connect page when there are no runner configs but runner names #3298 : 1 other dependent PR (#3310 )
• chore(rivetkit): log version with error logs #3303
• chore(rivetkit): log close code & reason in disconnect warning #3302
• feat(rivetkit): integrate websocket hibernation #3301
• fix: use correct vbare functions for runner tunnel #3300 : 1 other dependent PR (#3332 )
• feat(grafana): fix api dashboards #3193
• fix: docker compose build #3273
• chore: fix remaining warnings for all targets #3305
• fix(gas): fix from_workflow when creating standalone ctx from op ctx #3342
• ci: udpate ci filter to succeed if no relevant changes #3343
• main

---

How to use the Graphite Merge Queue

Add the label merge-queue to this PR to add it to the merge queue.

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[claude]

Code Review

Summary

This PR changes the Changelog component from using useSuspenseQuery to useQuery, making the changelog fetch non-blocking. This is a good improvement that prevents the changelog from blocking the app's initial render.

✅ Positive Aspects

1. Proper Error Handling: The change correctly handles loading, error, and empty data states by returning early with the children wrapped in a Slot component with the ping indicator hidden.

2. User Experience Improvement: By making this non-blocking, the app will load faster and won't be delayed if the changelog service is slow or unavailable.

3. Graceful Degradation: The component gracefully falls back to showing the trigger without the changelog functionality when data is unavailable.

4. Consistent UI: The early return maintains the same className behavior to hide the ping indicator when there's no data.

🔍 Potential Issues

1. Optional Array Access Without Safety Check: On line 149 (in the updated code), there's code that accesses data[0]:

   setLast(data[0].published);

   While there's a check for data.length === 0 earlier in the function at line 123, this code path is only reached after that check, so data[0] should be safe. However, the logic could be clearer.

2. Missing data in Content: On line 164, data[0] is accessed again:

   content={<ChangelogEntry {...data[0]} isNew={hasNewChangelog} />}

   TypeScript might complain here since data could theoretically be undefined despite the early return check. Consider adding a type assertion or non-null assertion if TypeScript raises issues.

💡 Suggestions

1. Loading State: Consider showing a loading skeleton or indicator while the changelog is loading, rather than just hiding the ping. This would improve perceived performance.

2. Error Logging: Consider logging errors to help with debugging when the changelog fails to load.

3. Stale Data Handling: The query has a 1-hour stale time. Consider if the component should show stale data while refetching in the background using keepPreviousData or similar React Query options.

🧪 Testing Considerations

• No tests exist for this component (checked for changelog.test.* and changelog.spec.*)
• Consider adding tests for:
  • Loading state behavior
  • Error state behavior
  • Empty data behavior
  • New changelog detection logic
  • LocalStorage interaction

🔒 Security

No security concerns identified. The component fetches from a hardcoded URL and doesn't handle user input directly.

⚡ Performance

The change improves performance by not blocking rendering on the changelog fetch. The query already has appropriate caching (1 hour stale time) configured in changelogQueryOptions() at frontend/src/queries/global.ts:41.

Verdict

Approved ✅ - This is a solid improvement that makes the changelog fetch non-blocking. The implementation is mostly sound, with only minor suggestions for improvement around error handling and loading states.

[linear]

FRONT-873 Do not require changelog.json to load as a critical request

[graphite-app]

Graphite Automations

"Test" took an action on this PR • (11/03/25)

1 assignee was added to this PR based on Kacper Wojciechowski's automation.