jas0nw01
jas0nw01•2w ago

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>
// 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!
3 Replies
Convex Bot
Convex Bot•2w ago
Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!
Sean Aguinaga
Sean Aguinaga•2w ago
Check this out https://gist.github.com/itsMapleLeaf/d52357f17f674795a86f155f5cf80eb5
Gist
React suspense with Convex
React suspense with Convex. GitHub Gist: instantly share code, notes, and snippets.
Sean Aguinaga
Sean Aguinaga•2w ago

Did you find this page helpful?