fix(sdk): build suspense into nft provider

Author: gregfromstl

packages/thirdweb/src/extensions/prebuilts/deploy-published.test.ts

@@ -1,6 +1,7 @@
 "use client";
 
 import { useSuspenseQuery } from "@tanstack/react-query";
+import { Suspense } from "react";
 import { getNFTInfo } from "./media.js";
 import { useNFTContext } from "./provider.js";
 
@@ -37,9 +38,10 @@ import { useNFTContext } from "./provider.js";
 export function Description(props: {
   className: string;
   style: React.CSSProperties;
+  fallback?: React.ReactNode;
 }) {
   const { contract, tokenId } = useNFTContext();
-  const nftQuery = useSuspenseQuery({
+  const { data } = useSuspenseQuery({
     queryKey: [
       "__nft_info_internal__",
       contract.chain.id,
@@ -48,6 +50,10 @@ export function Description(props: {
     ],
     queryFn: () => getNFTInfo({ contract, tokenId }),
   });
-  const description = nftQuery.data?.metadata.description || "";
-  return <span {...props}>{description}</span>;
+
+  return (
+    <Suspense fallback={props.fallback ?? null}>
+      <span {...props}>{data.metadata.description}</span>
+    </Suspense>
+  );
 }

packages/thirdweb/src/react/web/ui/prebuilt/NFT/description.tsx

@@ -1,4 +1,5 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
+import { Suspense } from "react";
 import { getNFT as getNFT721 } from "../../../../../extensions/erc721/read/getNFT.js";
 import { getNFT as getNFT1155 } from "../../../../../extensions/erc1155/read/getNFT.js";
 import type { NFT } from "../../../../../utils/nft/parseNft.js";
@@ -16,7 +17,12 @@ import { type NFTProviderProps, useNFTContext } from "./provider.js";
 export type NFTMediaProps = Omit<
   MediaRendererProps,
   "src" | "poster" | "client"
->;
+> & {
+  /**
+   * Fallback content to display while the NFT data is being fetched
+   */
+  fallback?: React.ReactNode;
+};
 
 /**
  * This component fetches and displays an NFT's media. It uses thirdweb [`MediaRenderer`](https://portal.thirdweb.com/refernces/typescript/v5/MediaRenderer) under the hood
@@ -60,7 +66,7 @@ export type NFTMediaProps = Omit<
  */
 export function Media(props: NFTMediaProps) {
   const { contract, tokenId } = useNFTContext();
-  const nftQuery = useSuspenseQuery({
+  const { data } = useSuspenseQuery({
     queryKey: [
       "__nft_info_internal__",
       contract.chain.id,
@@ -69,17 +75,18 @@ export function Media(props: NFTMediaProps) {
     ],
     queryFn: () => getNFTInfo({ contract, tokenId }),
   });
-  const animation_url = nftQuery.data?.metadata.animation_url;
-  const image =
-    nftQuery.data?.metadata.image || nftQuery.data?.metadata.image_url;
+  const animation_url = data.metadata.animation_url;
+  const image = data.metadata.image || data.metadata.image_url;
 
   return (
-    <MediaRenderer
-      client={contract.client}
-      src={animation_url || image}
-      poster={image}
-      {...props}
-    />
+    <Suspense fallback={props.fallback ?? null}>
+      <MediaRenderer
+        client={contract.client}
+        src={animation_url || image}
+        poster={image}
+        {...props}
+      />
+    </Suspense>
   );
 }
 

packages/thirdweb/src/react/web/ui/prebuilt/NFT/media.tsx

@@ -1,4 +1,5 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
+import { Suspense } from "react";
 import { getNFTInfo } from "./media.js";
 import { useNFTContext } from "./provider.js";
 
@@ -37,9 +38,10 @@ import { useNFTContext } from "./provider.js";
 export function Name(props: {
   className?: string;
   style?: React.CSSProperties;
+  fallback?: React.ReactNode;
 }) {
   const { contract, tokenId } = useNFTContext();
-  const nftQuery = useSuspenseQuery({
+  const { data } = useSuspenseQuery({
     queryKey: [
       "__nft_info_internal__",
       contract.chain.id,
@@ -48,6 +50,10 @@ export function Name(props: {
     ],
     queryFn: () => getNFTInfo({ contract, tokenId }),
   });
-  const name = nftQuery.data?.metadata.name || "";
-  return <span {...props}>{name}</span>;
+
+  return (
+    <Suspense fallback={props.fallback ?? null}>
+      <span {...props}>{data.metadata.name}</span>
+    </Suspense>
+  );
 }

packages/thirdweb/src/react/web/ui/prebuilt/NFT/name.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext } from "react";
+import { Suspense, createContext, useContext } from "react";
 import type { ThirdwebContract } from "../../../../../contract/contract.js";
 
 /**
@@ -14,6 +14,10 @@ export type NFTProviderProps = {
    * The tokenId whose info you want to display
    */
   tokenId: bigint;
+  /**
+   * Fallback content to display while the NFT data is being fetched
+   */
+  fallback?: React.ReactNode;
 };
 
 /**
@@ -57,19 +61,17 @@ export function useNFTContext() {
  *   client: yourThirdwebClient,
  * });
  *
- * <NFT.Provider contract={contract} tokenId={0n}>
- *   <Suspense fallback={"Loading media..."}>
- *     <NFT.Media />
- *     <NFT.Description />
- *   </Suspense>
+ * <NFT.Provider contract={contract} tokenId={0n} fallback={"Loading media..."}>
+ *    <NFT.Media />
+ *    <NFT.Description />
  * </NFT>
  * ```
  * @nft
  */
 export function Provider(props: React.PropsWithChildren<NFTProviderProps>) {
   return (
     <NFTProviderContext.Provider value={props}>
-      {props.children}
+      <Suspense fallback={props.fallback ?? null}>{props.children}</Suspense>
     </NFTProviderContext.Provider>
   );
 }