fix(sdk): build suspense into nft provider

Author: gregfromstl

packages/thirdweb/src/react/web/ui/prebuilt/NFT/provider.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>
   );
 }