troubleshoot nft acheivement section loading state

packages/nextjs/components/portfolio/sections/Achievements.tsx

@@ -9,16 +9,21 @@ export function Achievements() {
   console.log("nfts", nfts);
 
   if (nftsError) {
-    console.log("nftsError");
-    return <div>Error loading achievement NFTs</div>;
+    console.error("nftsError", nftsError);
+    return (
+      <SectionContainer>
+        <SectionHeader title="Achievements" />
+        <div>Error loading achievement NFTs</div>
+      </SectionContainer>
+    );
   }
 
   return (
     <SectionContainer>
       <SectionHeader title="Achievements" />
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8 rounded-xl">
-        {nfts.data &&
-          nfts.data.map((nft: any, idx: number) => (
+      {nfts?.data ? (
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8 rounded-xl">
+          {nfts.data.map((nft: any, idx: number) => (
             <div
               key={idx}
               className="flex flex-col items-center justify-center border border-base-content rounded-xl p-3 bg-base-200"
@@ -27,7 +32,12 @@ export function Achievements() {
               <p className="text-xl">{nft.name}</p>
             </div>
           ))}
-      </div>
+        </div>
+      ) : (
+        <div>
+          <div className="text-center">Fetching NFT acheivements...</div>
+        </div>
+      )}
     </SectionContainer>
   );
 }