Add loading spinner and modal on asset metadata upload (#33)

components/LoadingModal.tsx

@@ -0,0 +1,11 @@
+export const LoadingModal = () => {
+  return (
+    <div
+      className="flex overflow-hidden fixed top-0 right-0 bottom-0 left-0 z-50 flex-col justify-center items-center w-full h-screen bg-gray-900 opacity-80"
+      style={{ margin: 0 }}
+    >
+      <img alt="Pixel Logo" className="mb-5 w-[50px] h-[50px] animate-spin-slow" src="/pixel.png" />
+      <p className="w-1/3 font-bold text-center text-white">Uploading assets and metadata. This may take a while...</p>
+    </div>
+  )
+}

pages/collections/create.tsx

@@ -17,6 +17,8 @@ import type { MintingDetailsDataProps } from 'components/collections/creation/Mi
 import type { RoyaltyDetailsDataProps } from 'components/collections/creation/RoyaltyDetails'
 import type { UploadDetailsDataProps } from 'components/collections/creation/UploadDetails'
 import type { WhitelistDetailsDataProps } from 'components/collections/creation/WhitelistDetails'
+import { Conditional } from 'components/Conditional'
+import { LoadingModal } from 'components/LoadingModal'
 import { useContracts } from 'contexts/contracts'
 import { useWallet } from 'contexts/wallet'
 import type { NextPage } from 'next'
@@ -47,6 +49,7 @@ const CollectionCreationPage: NextPage = () => {
   const [whitelistDetails, setWhitelistDetails] = useState<WhitelistDetailsDataProps | null>(null)
   const [royaltyDetails, setRoyaltyDetails] = useState<RoyaltyDetailsDataProps | null>(null)
 
+  const [uploading, setUploading] = useState(false)
   const [contractAddress, setContractAddress] = useState<string | null>(null)
   const [transactionHash, setTransactionHash] = useState<string | null>(null)
 
@@ -58,6 +61,8 @@ const CollectionCreationPage: NextPage = () => {
       checkWhitelistDetails()
       checkRoyaltyDetails()
 
+      setUploading(true)
+
       const baseUri = await uploadFiles()
       //upload coverImageUri and append the file name
       const coverImageUri = await upload(
@@ -69,6 +74,8 @@ const CollectionCreationPage: NextPage = () => {
         uploadDetails?.pinataSecretKey as string,
       )
 
+      setUploading(false)
+
       let whitelist: string | undefined
       if (whitelistDetails?.whitelistType === 'existing') whitelist = whitelistDetails.contractAddress
       else if (whitelistDetails?.whitelistType === 'new') whitelist = await instantiateWhitelist()
@@ -78,6 +85,7 @@ const CollectionCreationPage: NextPage = () => {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (error: any) {
       toast.error(error.message)
+      setUploading(false)
     }
   }
 
@@ -274,6 +282,10 @@ const CollectionCreationPage: NextPage = () => {
       <div className="mt-5 space-y-5 text-center">
         <h1 className="font-heading text-4xl font-bold">Create Collection</h1>
 
+        <Conditional test={uploading}>
+          <LoadingModal />
+        </Conditional>
+
         <p>
           Make sure you check our{' '}
           <Anchor className="font-bold text-plumbus hover:underline" href={links['Docs']}>

tailwind.config.js

@@ -6,7 +6,7 @@ module.exports = {
   content: ['./{components,contexts,hooks,pages,utils}/**/*.{js,cjs,mjs,ts,tsx}'],
 
   daisyui: {
-    themes: ["dracula"]
+    themes: ['dracula'],
   },
 
   theme: {
@@ -44,6 +44,9 @@ module.exports = {
         sans: ['Roboto', ...defaultTheme.fontFamily.sans],
         mono: ['"JetBrains Mono"', ...defaultTheme.fontFamily.mono],
       },
+      animation: {
+        'spin-slow': 'spin 3s linear infinite',
+      },
     },
   },
 
@@ -65,6 +68,6 @@ module.exports = {
         },
       })
     }),
-    require("daisyui"),
+    require('daisyui'),
   ],
 }