add custom loading fallback to List components

ongama-team · Aug 2, 2022 · 5872935 · 5872935
1 parent eda08f4
commit 5872935
Show file tree

Hide file tree

Showing 12 changed files with 138 additions and 130 deletions.
diff --git a/components/modules/__modules__/ListViewBuilder/LoadNftsFallback/index.tsx b/components/modules/__modules__/ListViewBuilder/LoadNftsFallback/index.tsx
@@ -0,0 +1,21 @@
+import React, { FC } from "react";
+import NFTCardFallback from "../../NFTCardFallback";
+
+const LoadNftsFallback: FC = () => {
+  return (
+    <div className="grid 2xl:grid-cols-4 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-3 pb-10 transition-all">
+      {Array.from({ length: 4 }).map((_, index) => {
+        return (
+          <div
+            key={index}
+            className="max-w-full min-w-[16rem] mobile:max-w-full mobile:min-w-full"
+          >
+            <NFTCardFallback />
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default LoadNftsFallback;
diff --git a/components/modules/__modules__/ListViewBuilder/index.tsx b/components/modules/__modules__/ListViewBuilder/index.tsx
@@ -2,11 +2,11 @@ import React, { FC, memo } from "react";
 import { IListView, IListViewBuilder } from "@lib/@Types";
 import { NftModelToCardData } from "@lib/models/GeneralModel";
 import useMediaQuery from "@components/hooks/useMediaQuery";
-import { List, Skeleton } from "antd";
+import { List } from "antd";
 import { LoadMore } from "@components/modules/__modules__/Card/LoadMore";
 import SkeletonLoader from "@components/modules/__modules__/Card/SkeletonLoader";
 import NFTCardFallback from "../NFTCardFallback";
-import NftPreview from "@components/CreateNftPage/NftPreview";
+import LoadNftsFallback from "./LoadNftsFallback";
 
 export const ListView: FC<IListView> = ({
   loading,
@@ -34,8 +34,10 @@ export const ListView: FC<IListView> = ({
   return (
     <div className="items-center">
       <List
-        loading={loading}
-        className={loading ? "hidden" : "block"}
+        loading={{
+          indicator: <LoadNftsFallback />,
+          spinning: loading,
+        }}
         loadMore={
           loadMore || (
             <div className={!loadingMore ? "flex justify-center" : ""}>
@@ -65,19 +67,6 @@ export const ListView: FC<IListView> = ({
           return renderItem(item);
         }}
       />
-
-      <List
-        grid={grid}
-        // loading={false}
-        loading={loading}
-        className={loading ? "block" : "hidden"}
-        dataSource={items.slice(0, preloaderLimit())}
-        renderItem={() => (
-          <List.Item>
-            <NFTCardFallback />
-          </List.Item>
-        )}
-      />
     </div>
   );
 };

diff --git a/components/modules/__modules__/NFTCardFallback/index.tsx b/components/modules/__modules__/NFTCardFallback/index.tsx
@@ -3,17 +3,15 @@ import React from "react";
 
 const NFTCardFallback = () => {
   return (
-    <>
-      <div className="h-fit w-full transition-all flex-none border hover:border-2 border-slate-200 dark:border-gray-500 relative p-2 mobile:mr-0 rounded-xl snap-center">
-        <div className="h-72 w-full bg-gray-300 animate-pulse rounded-xl" />
-        <div className="flex justify-between items-center mt-3">
-          <div className="h-2 w-1/2 bg-gray-300 animate-pulse rounded-sm" />
-          <div className="h-2 w-1/5 bg-gray-300 animate-pulse rounded-sm" />
-        </div>
-        <div className="mt-3 w-full h-16 bg-gray-300 animate-pulse rounded-xl" />
-        <div className="mt-3 w-full h-10 bg-gray-300 animate-pulse rounded-xl" />
+    <div className="relative h-fit w-full transition-all flex-none border hover:border-2 border-slate-200 dark:border-gray-500 p-2 mobile:mr-0 rounded-xl snap-center">
+      <div className="h-72 w-full bg-gray-300/50 animate-pulse rounded-xl" />
+      <div className="flex justify-between items-center mt-3">
+        <div className="h-2 w-1/2 bg-gray-300/50 animate-pulse rounded-sm" />
+        <div className="h-2 w-1/5 bg-gray-300/50 animate-pulse rounded-sm" />
       </div>
-    </>
+      <div className="mt-3 w-full h-16 bg-gray-300/50 animate-pulse rounded-xl" />
+      <div className="mt-3 w-full h-10 bg-gray-300/50 animate-pulse rounded-xl" />
+    </div>
   );
 };
 

diff --git a/components/modules/__noAuth/ExploreNFTs/index.tsx b/components/modules/__noAuth/ExploreNFTs/index.tsx
@@ -40,88 +40,57 @@ const ExploreNFTs = () => {
   };
 
   return (
-    <div>
-      <section className="2xl:w-[80%] xl:w-[85%] lg:w-[90%] md:w-[95%] mx-auto h-fit mt-12 ">
-        <h2 className="font-bold text-xl text-black font-ibmPlexSans md:text-2xl lg:text-3xl dark:text-white px-6 pb-3">
-          Explore NFTs
-        </h2>
-        <ShowWidget condition={!isLoading}>
-          <div className="flex justify-between mobile:mx-1 mobile:gap-2 mb-5 items-center dark:text-white font-bold relative px-5">
-            <div className="flex gap-5 mobile:gap-2 mobile:w-full">
-              <button
-                onClick={toggleBlockchainModal}
-                className="border border-gray-300 dark:border-gray-500 py-2 px-3 rounded-lg"
-              >
-                Blockchain
-              </button>
-              <button
-                onClick={togglePriceRangeModal}
-                className="border border-gray-300 dark:border-gray-500 py-2 px-3 rounded-lg"
-              >
-                Price Range
-              </button>
-              <ShowWidget condition={isBlockchainModal}>
-                <div
-                  ref={blockchainModalRef}
-                  className="absolute w-44 top-14 bg-white dark:bg-darkPrimary border border-gray-200 dark:border-darkLight z-20 rounded-lg shadow-lg transition-all"
-                >
-                  <p className="py-5 px-2 flex justify-between items-center">
-                    Polygon <VSingleDot className="text-green-600" />
-                  </p>
-                </div>
-              </ShowWidget>
-              <ShowWidget condition={isPriceRangeModal}>
-                <div
-                  ref={priceRangeModalRef}
-                  className="absolute w-60 top-14 left-28 mobile:left-0 mobile:mx-5 bg-white dark:bg-darkPrimary border border-gray-200 dark:border-darkLight z-20 rounded-lg shadow-lg transition-all"
-                >
-                  <p className="py-5 px-2 flex justify-between items-center">
-                    MATIC
-                  </p>
-                  <div className="flex gap-1">
-                    <input
-                      type="number"
-                      placeholder="from"
-                      className="w-full py-2 bg-gray-200 dark:bg-gray-500 m-1 rounded-lg px-2 outline-none transition-all focus:shadow-md  focus:bg-white dark:focus:bg-darkLight"
-                    />
-                    <input
-                      type="number"
-                      placeholder="to"
-                      className="w-full py-2 bg-gray-200 dark:bg-gray-500 m-1 rounded-lg px-2 outline-none transition-all focus:shadow-md  focus:bg-white dark:focus:bg-darkLight"
-                    />
-                  </div>
-                  <div className="flex gap-1">
-                    <button className="w-full py-2 bg-gray-200 dark:bg-gray-500 m-1 rounded-lg">
-                      Clear
-                    </button>
-                    <button className="w-full py-2 bg-blue-600 text-white m-1 rounded-lg">
-                      Apply
-                    </button>
-                  </div>
-                </div>
-              </ShowWidget>
-            </div>
+    // <div>
+    <section className="2xl:w-[80%] xl:w-[85%] lg:w-[90%] md:w-[95%] mx-auto h-fit mt-12">
+      <h2 className="font-bold text-xl text-black font-ibmPlexSans md:text-2xl lg:text-3xl dark:text-white px-6 pb-3">
+        Explore NFTs
+      </h2>
+      <ShowWidget condition={!isLoading}>
+        <div className="flex justify-between mobile:mx-1 mobile:gap-2 mb-5 items-center dark:text-white font-bold relative px-5">
+          <div className="flex gap-5 mobile:gap-2 mobile:w-full">
             <button
-              onClick={toggleSortModal}
+              onClick={toggleBlockchainModal}
               className="border border-gray-300 dark:border-gray-500 py-2 px-3 rounded-lg"
             >
-              <span className="mobile:hidden block">Filter & Sort</span>
-              <span className="hidden mobile:block text-2xl">
-                <VFilter />
-              </span>
+              Blockchain
             </button>
-            <ShowWidget condition={isSortModal}>
+            <button
+              onClick={togglePriceRangeModal}
+              className="border border-gray-300 dark:border-gray-500 py-2 px-3 rounded-lg"
+            >
+              Price Range
+            </button>
+            <ShowWidget condition={isBlockchainModal}>
               <div
-                ref={sortModalRef}
-                className="absolute top-14 bg-white border border-gray-200 dark:border-darkLight dark:bg-darkPrimary z-20 w-60 right-0 rounded-lg shadow-lg transition-all p-4"
+                ref={blockchainModalRef}
+                className="absolute w-44 top-14 bg-white dark:bg-darkPrimary border border-gray-200 dark:border-darkLight z-20 rounded-lg shadow-lg transition-all"
               >
-                <p className="py-5 px-2 flex justify-between items-center cursor-pointer hover:bg-gray-200 hover:dark:bg-darkLight rounded-lg transition-all">
-                  DESC <VSingleDot className="text-green-600" />
+                <p className="py-5 px-2 flex justify-between items-center">
+                  Polygon <VSingleDot className="text-green-600" />
                 </p>
-                <p className="py-5 px-2 flex justify-between items-center cursor-pointer hover:bg-gray-200 hover:dark:bg-darkLight rounded-lg transition-all">
-                  ASC
+              </div>
+            </ShowWidget>
+            <ShowWidget condition={isPriceRangeModal}>
+              <div
+                ref={priceRangeModalRef}
+                className="absolute w-60 top-14 left-28 mobile:left-0 mobile:mx-5 bg-white dark:bg-darkPrimary border border-gray-200 dark:border-darkLight z-20 rounded-lg shadow-lg transition-all"
+              >
+                <p className="py-5 px-2 flex justify-between items-center">
+                  MATIC
                 </p>
-                <div className="flex gap-3 mt-3">
+                <div className="flex gap-1">
+                  <input
+                    type="number"
+                    placeholder="from"
+                    className="w-full py-2 bg-gray-200 dark:bg-gray-500 m-1 rounded-lg px-2 outline-none transition-all focus:shadow-md  focus:bg-white dark:focus:bg-darkLight"
+                  />
+                  <input
+                    type="number"
+                    placeholder="to"
+                    className="w-full py-2 bg-gray-200 dark:bg-gray-500 m-1 rounded-lg px-2 outline-none transition-all focus:shadow-md  focus:bg-white dark:focus:bg-darkLight"
+                  />
+                </div>
+                <div className="flex gap-1">
                   <button className="w-full py-2 bg-gray-200 dark:bg-gray-500 m-1 rounded-lg">
                     Clear
                   </button>
@@ -132,25 +101,56 @@ const ExploreNFTs = () => {
               </div>
             </ShowWidget>
           </div>
-        </ShowWidget>
-
-        <div className="mx-5 justify-center h-fit">
-          <ListViewBuilder
-            items={nfts}
-            renderItem={(item) => (
-              <List.Item>
-                <NFTCard nft={item} />
-              </List.Item>
-            )}
-            hasMore={false}
-            showLoadMoreButton={shouldShowLoadMoreButton}
-            loading={currentNfts.isLoading}
-            loadingMore={false}
-            onLoadMore={onLoadMore}
-          />
+          <button
+            onClick={toggleSortModal}
+            className="border border-gray-300 dark:border-gray-500 py-2 px-3 rounded-lg"
+          >
+            <span className="mobile:hidden block">Filter & Sort</span>
+            <span className="hidden mobile:block text-2xl">
+              <VFilter />
+            </span>
+          </button>
+          <ShowWidget condition={isSortModal}>
+            <div
+              ref={sortModalRef}
+              className="absolute top-14 bg-white border border-gray-200 dark:border-darkLight dark:bg-darkPrimary z-20 w-60 right-0 rounded-lg shadow-lg transition-all p-4"
+            >
+              <p className="py-5 px-2 flex justify-between items-center cursor-pointer hover:bg-gray-200 hover:dark:bg-darkLight rounded-lg transition-all">
+                DESC <VSingleDot className="text-green-600" />
+              </p>
+              <p className="py-5 px-2 flex justify-between items-center cursor-pointer hover:bg-gray-200 hover:dark:bg-darkLight rounded-lg transition-all">
+                ASC
+              </p>
+              <div className="flex gap-3 mt-3">
+                <button className="w-full py-2 bg-gray-200 dark:bg-gray-500 m-1 rounded-lg">
+                  Clear
+                </button>
+                <button className="w-full py-2 bg-blue-600 text-white m-1 rounded-lg">
+                  Apply
+                </button>
+              </div>
+            </div>
+          </ShowWidget>
         </div>
-      </section>
-    </div>
+      </ShowWidget>
+
+      <div className="mx-5">
+        <ListViewBuilder
+          items={nfts}
+          renderItem={(item) => (
+            <List.Item>
+              <NFTCard nft={item} />
+            </List.Item>
+          )}
+          hasMore={false}
+          showLoadMoreButton={shouldShowLoadMoreButton}
+          loading={currentNfts.isLoading}
+          loadingMore={false}
+          onLoadMore={onLoadMore}
+        />
+      </div>
+    </section>
+    // {/* </div> */}
   );
 };
 

diff --git a/components/modules/__secured/Profile/CreatedContainer/index.tsx b/components/modules/__secured/Profile/CreatedContainer/index.tsx
@@ -31,7 +31,7 @@ const CreatedContainer = ({
   const { onLoadMore, shouldShowLoadMoreButton } = useNfTs();
 
   return (
-    <div className="flex flex-wrap justify-center mobile:justify-center my-5 gap-3">
+    <div className="my-5 w-full">
       <ListViewBuilder
         items={createdNFts}
         renderItem={(item) => (

diff --git a/components/modules/__secured/Profile/OwnedContainer/index.tsx b/components/modules/__secured/Profile/OwnedContainer/index.tsx
@@ -30,7 +30,7 @@ const OwnedContainer = ({
   );
 
   return (
-    <div className="flex justify-center mobile:justify-center my-5 gap-3">
+    <div className="my-5 w-full">
       <ListViewBuilder
         items={ownedNfts}
         renderItem={(item) => (

diff --git a/components/modules/__secured/Profile/index.tsx b/components/modules/__secured/Profile/index.tsx
@@ -30,7 +30,6 @@ import { UserAccount } from "@lib/models/UserAccount";
 import { NFTData, NFTMetaData } from "@lib/models/GeneralModel";
 import { backendApiService } from "@lib/services/BackendApiService";
 import ProfileReportOption from "./module/ProfileReportOptions";
-import ShowWidget from "@components/modules/__modules__/ShowWidget";
 
 interface IProps {
   searchedUserProfile: UserAccount;

diff --git a/components/modules/__secured/Profile/saleContainer/index.tsx b/components/modules/__secured/Profile/saleContainer/index.tsx
@@ -32,7 +32,7 @@ export const SaleContainer = ({
   const { onLoadMore, shouldShowLoadMoreButton } = useNfTs();
 
   return (
-    <div className="flex flex-wrap justify-center mobile:justify-center my-5 gap-3">
+    <div className="my-5">
       <ListViewBuilder
         items={listedNfts}
         renderItem={(item) => (

diff --git a/lib/@Types/index.ts b/lib/@Types/index.ts
@@ -8,7 +8,7 @@ export const defaultVectorProps: classNameInterface = {
   className: "h-6 w-6",
 };
 
-export interface updateProfileInterface {
+export interface IUpdateProfile {
   walletAddress: string;
   username?: string;
   userBio?: string;

diff --git a/lib/services/BackendApiService.ts b/lib/services/BackendApiService.ts
@@ -2,7 +2,7 @@ import { UserAccount } from "@lib/models/UserAccount";
 import http from "@lib/http";
 import * as Sentry from "@sentry/nextjs";
 import { orderObject } from "@lib/Utils";
-import { updateProfileInterface } from "@lib/@Types";
+import { IUpdateProfile } from "@lib/@Types";
 import {
   IGetRequestNFTsParams,
   NftCardData,
@@ -52,7 +52,7 @@ class BackendApiService {
     coverThumbnailUrl,
     coverUrl,
     signature,
-  }: updateProfileInterface): Promise<any | null> {
+  }: IUpdateProfile): Promise<any | null> {
     try {
       const profileEndpoint = "/users/profile";
       const response = await http.put(

diff --git a/styles/globals.css b/styles/globals.css
@@ -85,3 +85,8 @@ input[type="number"]::-webkit-outer-spin-button {
     background-position: 1000px 0;
   }
 }
+
+/* hide default spin div container as w're using a custom fallback */
+.ant-spin-blur {
+  display: none;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -7,10 +7,6 @@ module.exports = {
   ],
   darkMode: "class",
   theme: {
-    gridTemplateColumns: {
-      "auto-fit": "repeat(auto-fit, minmax(20rem, 1fr))",
-      // "auto-fit": "repeat(auto-fit, minmax(16rem, 1fr)",
-    },
     colors: {
       ...colors,
       darkPrimary: "#041C32",