feat(disable-ssr): disable ssr & optimize image loading

apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-items-data-grid-view.tsx

@@ -71,7 +71,6 @@ export default function CollectionItemsDataGridView({
           }
 
           return (
-            // TODO @YohanTz: Extract to NftCard component and sub-components
             <Link
               href={`/token/${collectionToken.contract}/${collectionToken.token_id}`}
               key={`${collectionToken.contract}-${collectionToken.token_id}`}

apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-items-data.tsx

@@ -4,7 +4,7 @@ import { useMemo } from "react";
 import { useInfiniteQuery } from "@tanstack/react-query";
 
 import type { ViewType } from "../../../../components/view-type-toggle-group";
-import type { CollectionTokensApiResponse } from "../queries/getCollectionData";
+import type { CollectionTokensApiResponse, CollectionToken } from "../queries/getCollectionData";
 import type {
   CollectionSortBy,
   CollectionSortDirection,
@@ -17,15 +17,14 @@ import LiveResultsIndicator from "./live-results-indicator";
 
 interface CollectionItemsDataProps {
   collectionAddress: string;
-  collectionTokensInitialData: CollectionTokensApiResponse;
   sortBy: CollectionSortBy;
   sortDirection: CollectionSortDirection;
   totalTokensCount: number;
   viewType: ViewType;
 }
+
 export default function CollectionItemsData({
   collectionAddress,
-  collectionTokensInitialData,
   sortBy,
   sortDirection,
   totalTokensCount,
@@ -36,16 +35,12 @@ export default function CollectionItemsData({
     fetchNextPage,
     hasNextPage,
     isFetchingNextPage,
+    isLoading,
   } = useInfiniteQuery({
-    // TODO @YohanTz: add filters states to query key
-    queryKey: ["collectionTokens", sortDirection, sortBy, collectionAddress],
+    queryKey: ["collectionTokens", sortDirection, sortBy, collectionAddress] as const,
     refetchInterval: false,
-    getNextPageParam: (lastPage) => lastPage.next_page,
-    initialData: {
-      pages: [collectionTokensInitialData],
-      pageParams: [],
-    },
-    initialPageParam: undefined,
+    getNextPageParam: (lastPage: CollectionTokensApiResponse) => lastPage.next_page,
+    initialPageParam: undefined as number | undefined,
     queryFn: ({ pageParam }) =>
       getCollectionTokens({
         collectionAddress,
@@ -61,11 +56,15 @@ export default function CollectionItemsData({
     isFetchingNextPage,
   });
 
-  const collectionTokens = useMemo(
-    () => infiniteData.pages.flatMap((page) => page.data),
+  const collectionTokens: CollectionToken[] = useMemo(
+    () => infiniteData?.pages.flatMap((page) => page.data) ?? [],
     [infiniteData],
   );
 
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
   return (
     <>
       <LiveResultsIndicator
@@ -83,4 +82,4 @@ export default function CollectionItemsData({
       )}
     </>
   );
-}
+}

apps/arkmarket/src/app/collection/[collectionAddress]/components/collection.tsx

@@ -4,10 +4,7 @@ import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { useQueryState } from "nuqs";
 
-import type {
-  CollectionInfosApiResponse,
-  CollectionTokensApiResponse,
-} from "../queries/getCollectionData";
+
 import type { ViewType } from "~/components/view-type-toggle-group";
 import { getCollectionInfos } from "../queries/getCollectionData";
 import {
@@ -26,14 +23,14 @@ import MobileCollectionHeader from "./mobile-collection-header";
 
 interface CollectionProps {
   collectionAddress: string;
-  collectionInfosInitialData: CollectionInfosApiResponse;
-  collectionTokensInitialData: CollectionTokensApiResponse;
+  // collectionInfosInitialData: CollectionInfosApiResponse;
+  // collectionTokensInitialData: CollectionTokensApiResponse;
 }
 
 export default function Collection({
   collectionAddress,
-  collectionInfosInitialData,
-  collectionTokensInitialData,
+  // collectionInfosInitialData,
+  // collectionTokensInitialData,
 }: CollectionProps) {
   const [filtersPanelOpen, setFiltersPanelOpen] = useState(false);
   // TODO @YohanTz: Get State from URL query params
@@ -54,7 +51,6 @@ export default function Collection({
   const { data: collectionInfos } = useQuery({
     queryKey: ["collectionInfos", collectionAddress],
     refetchInterval: false,
-    initialData: collectionInfosInitialData,
     queryFn: () => getCollectionInfos({ collectionAddress }),
   });
 
@@ -74,19 +70,21 @@ export default function Collection({
           className="hidden md:block"
           collectionAddress={collectionAddress}
         />
-
-        <MobileCollectionHeader
-          className="md:hidden"
-          collectionAddress={collectionAddress}
-          collectionInfos={collectionInfos}
-        />
-
-        <div className="sticky top-[var(--site-header-height)] z-20 bg-background">
-          <CollectionHeader
+        {collectionInfos ? (
+          <MobileCollectionHeader
+            className="md:hidden"
             collectionAddress={collectionAddress}
-            className="hidden md:block"
             collectionInfos={collectionInfos}
           />
+        ) : null}
+        <div className="sticky top-[var(--site-header-height)] z-20 bg-background">
+          {collectionInfos ? (
+            <CollectionHeader
+              collectionAddress={collectionAddress}
+              className="hidden md:block"
+              collectionInfos={collectionInfos}
+            />
+          ) : null}
           <CollectionItemsActivityHeader
             activeTab={activeTab}
             onTabChange={setActiveTab}
@@ -100,7 +98,7 @@ export default function Collection({
                 setSortBy={setSortBy}
                 viewType={viewType}
                 setViewType={setViewType}
-                totalTokensCount={collectionInfos.token_count}
+                totalTokensCount={0}
               />
             )}
             {activeTab === "activity" && <p>Coming</p>}
@@ -111,8 +109,7 @@ export default function Collection({
           {activeTab === "items" && (
             <CollectionItemsData
               collectionAddress={collectionAddress}
-              collectionTokensInitialData={collectionTokensInitialData}
-              totalTokensCount={collectionInfos.token_count}
+              totalTokensCount={0}
               sortDirection={sortDirection}
               sortBy={sortBy}
               viewType={viewType}

apps/arkmarket/src/app/collection/[collectionAddress]/components/live-results-indicator.tsx

@@ -16,7 +16,6 @@ export default function LiveResultsIndicator({
         <span className="relative inline-flex h-4 w-4 rounded-full bg-green-500" />
       </span>
 
-      {/* TODO @YohanTz: Number of tokens */}
       <p>{formatNumber(totalCount)} results</p>
     </div>
   );

apps/arkmarket/src/app/collection/[collectionAddress]/page.tsx

@@ -1,11 +1,4 @@
-import { notFound } from "next/navigation";
-
 import Collection from "./components/collection";
-import {
-  getCollectionInfos,
-  getCollectionTokens,
-} from "./queries/getCollectionData";
-import { collectionPageSearchParamsCache } from "./search-params";
 
 interface CollectionPageProps {
   params: {
@@ -14,33 +7,33 @@ interface CollectionPageProps {
   searchParams: Record<string, string | string[] | undefined>;
 }
 
-export default async function CollectionPage({
+export default function CollectionPage({
   params,
-  searchParams,
+  // searchParams,
 }: CollectionPageProps) {
   const { collectionAddress } = params;
-  const { direction, sort } =
-    collectionPageSearchParamsCache.parse(searchParams);
-  const collectionInfosInitialData = await getCollectionInfos({
-    collectionAddress,
-  });
+  // const { direction, sort } =
+  //   collectionPageSearchParamsCache.parse(searchParams);
+  // const collectionInfosInitialData = await getCollectionInfos({
+  //   collectionAddress,
+  // });
 
-  const collectionTokensInitialData = await getCollectionTokens({
-    collectionAddress,
-    sortDirection: direction,
-    sortBy: sort,
-  });
+  // const collectionTokensInitialData = await getCollectionTokens({
+  //   collectionAddress,
+  //   sortDirection: direction,
+  //   sortBy: sort,
+  // });
 
-  if (!collectionTokensInitialData.data.length) {
-    // TODO @YohanTz: Handle case when a collection contract is deployed but no tokens in it
-    notFound();
-  }
+  // if (!collectionTokensInitialData.data.length) {
+  //   // TODO @YohanTz: Handle case when a collection contract is deployed but no tokens in it
+  //   notFound();
+  // }
 
   return (
     <Collection
       collectionAddress={collectionAddress}
-      collectionInfosInitialData={collectionInfosInitialData}
-      collectionTokensInitialData={collectionTokensInitialData}
+      // collectionInfosInitialData={collectionInfosInitialData}
+      // collectionTokensInitialData={collectionTokensInitialData}
     />
   );
 }

apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/queries/getTokenData.ts

@@ -1,6 +1,5 @@
 import { env } from "~/env";
 
-// TODO @YohanTz: double check this type
 interface TokenMetadataAttribute {
   display_type: string | null;
   trait_type: string | null;