backpack1098B
Convex Community•6mo ago•
3 replies
backpack1098

Subject: Implementing Suspense-like loading patterns with Convex useQuery

Hi Convex team,

I'm trying to implement a UX pattern where users can click on a tab that needs data, but instead of seeing a loading state, they see content from another tab while the data loads in the background. Once ready, it automatically transitions to the requested tab.

Current Implementation:
// User clicks "Activity" tab
const handleTabChange = (value: string) => {
  if (value === "activity") {
    setWantsActivityTab(true)
    setActiveTab("wallet") // Show wallet tab immediately
  }
}

// Activity tab content
<TabsContent value="activity">
  {wantsActivityTab ? (
    <UserActivityContent onReady={() => setActiveTab("activity")} />
  ) : (
    <UserWalletContent /> // Fallback while loading
  )}
</TabsContent>


The Problem:
Convex's useQuery returns undefined while loading, which means I can't use React's Suspense boundary effectively. The component shows loading skeletons instead of the fallback content.

Questions:
1. Does Convex support a suspense mode where queries automatically suspend and work with React's Suspense boundary?
2. Is there a recommended pattern for implementing this "show fallback content while loading" behavior with Convex?

What I'm trying to achieve:
- User clicks "Activity" tab
- Immediately see "Wallet" tab content (no loading state)
- Activity data loads in background
- Automatically switch to Activity tab when ready

This is a common UX pattern in modern apps, but I'm struggling to implement it cleanly with Convex's current API.

Thanks for your help!
Was this page helpful?