Spinner for completion nft (closes: #23) 🦔

Co-authored-by: dysbulic <[email protected]>

package.json

@@ -61,5 +61,6 @@
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.0.1",
     "vite": "^5.4.1"
-  }
+  },
+  "packageManager": "[email protected]+sha512.65a9c38a8172948f617a53619762cd77e12b9950fe1f9239debcb8d62c652f2081824b986fee7c0af6c0a7df615becebe4bf56e17ec27214a87aa29d9e038b4b"
 }

src/components/Reward.tsx

@@ -3,13 +3,15 @@ import { toHTTP } from '../utils'
 import abi from '../abis/QuestChain.json'
 import { Chapter, useLoadedBook } from '../BookContext'
 import toast from 'react-hot-toast'
+import { useState } from 'react'
 
 export const Reward = () => {
   const book = useLoadedBook()
   const { data: hash, writeContract } = useWriteContract()
   const { isLoading: confirming, isSuccess: confirmed } = (
     useWaitForTransactionReceipt({ hash })
   )
+const [loaded, setLoaded] = useState(false)
 
   if(!book) throw new Error('No book found.')
 
@@ -65,7 +67,8 @@ export const Reward = () => {
     <div id="reward" className="flex flex-col ml-4 mt-8 md:mt-1">
       <div className="card rounded-sm bg-secondary/25 h-auto max-w-md mr-4 mx-auto">
         <h1 className="text-3xl font-bold text-center my-4 mx-2">Completion NFT</h1>
-        <img src={toHTTP(book.nft.image)} alt="Soulbound NFT" className="w-full h-full object-contain pb-4 px-4" />
+        <img onLoad={() => setLoaded(true)} src={toHTTP(book.nft.image)} alt="Soulbound NFT" className="w-full h-full object-contain pb-4 px-4" />
+        {!loaded && <div className="grid place-items-center"><span className="loading-spinner loading loading-md"></span></div>}
         {mintable && (
           <button disabled={book.nft.minted || label !== defaultLabel} onClick={mint} className="btn btn-primary">
             {label}

src/routes/book/$slug/$chapter/index.lazy.tsx

@@ -25,7 +25,7 @@ export function Book() {
         >
           <BookHeader />
           <main className="md:flex justify-start overflow-hidden relative">
-            <Suspense fallback={<h1>Loading…</h1>}>
+            <Suspense fallback={<h1 className="mt-44">Loading…</h1>}>
               <Chapters />
               <Content />
               <Reward />