add mech loading gif

frontend/src/components/Connect/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import useWalletConnect, { Session } from "../../hooks/useWalletConnect"
-import Spinner from "../Spinner"
+import Loading from "../Loading"
 
 import classes from "./Connect.module.css"
 import Button from "../Button"
@@ -44,7 +44,7 @@ const MechConnect: React.FC = () => {
           placeholder="wc:9e5b70f5-ddef-4403-999e-"
         />
       </div>
-      {loading && <Spinner />}
+      {loading && <Loading />}
 
       {sessions.length > 0 && (
         <>

frontend/src/components/Deploy/index.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import Spinner from "../Spinner"
+import Loading from "../Loading"
 
 import classes from "./Deploy.module.css"
 import Button from "../Button"
@@ -18,7 +18,7 @@ const MechDeploy: React.FC<Props> = ({ deployPending, deploy }) => {
         <Button onClick={deploy} disabled={deployPending}>
           {deployPending ? (
             <>
-              <Spinner /> Deploying...
+              <Loading /> Deploying...
             </>
           ) : (
             "Deploy"

frontend/src/components/Loading/index.tsx

@@ -0,0 +1,11 @@
+import React from "react"
+
+import classes from "./style.module.css"
+
+const Loading: React.FC = () => (
+  <div className={classes.container}>
+    <img src="/loading-short.gif" alt="Loading" />
+  </div>
+)
+
+export default Loading

frontend/src/components/Loading/style.module.css

@@ -0,0 +1,10 @@
+.container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.container img {
+  max-width: 150px;
+}

frontend/src/components/NFTGrid/index.tsx

@@ -1,5 +1,5 @@
 import NFTGridItem from "../NFTGridItem"
-import Spinner from "../Spinner"
+import Loading from "../Loading"
 
 import classes from "./NFTGrid.module.css"
 import { useChainId } from "wagmi"
@@ -35,7 +35,7 @@ export const AccountNftGrid: React.FC<Props> = ({ address }) => {
 
   const nfts = nftBalances.map((nft) => ({ ...nft, deployed: isDeployed(nft) }))
 
-  if (isLoading) return <Spinner />
+  if (isLoading) return <Loading />
 
   if (nfts.length === 0) {
     return (
@@ -84,7 +84,7 @@ export const CollectionNftGrid: React.FC<Props> = ({ address }) => {
 
   const nfts = nftBalances.map((nft) => ({ ...nft, deployed: isDeployed(nft) }))
 
-  if (isLoading) return <Spinner />
+  if (isLoading) return <Loading />
 
   return (
     <>

frontend/src/components/NFTItem/index.tsx

@@ -4,7 +4,7 @@ import copy from "copy-to-clipboard"
 import clsx from "clsx"
 
 import useTokenBalances from "../../hooks/useTokenBalances"
-import Spinner from "../Spinner"
+import Loading from "../Loading"
 import { useDeployMech } from "../../hooks/useDeployMech"
 
 import { calculateMechAddress } from "../../utils/calculateMechAddress"
@@ -105,7 +105,7 @@ const NFTItem: React.FC<Props> = ({ nft, chainId }) => {
         )}
       >
         {mechBalancesError && <p>Failed to load assets</p>}
-        {mechBalancesLoading && <Spinner />}
+        {mechBalancesLoading && <Loading />}
 
         {mechBalances.length === 0 && <p>No assets found</p>}
         <ul className={classes.assetList}>

frontend/src/components/Search/index.tsx

@@ -5,25 +5,35 @@ import classes from "./Search.module.css"
 import SearchResults, { SearchResult } from "./SearchResults"
 import { useChainId, usePublicClient } from "wagmi"
 import parseMechBytecode from "../../utils/parseMechBytecode"
+import Loading from "../Loading"
 
 const Search = () => {
   const chainId = useChainId()
   const client = usePublicClient()
   const [search, setSearch] = useState("")
   const [validSearch, setValidSearch] = useState(true)
   const [results, setResults] = useState<SearchResult[]>([])
+  const [resultsLoading, setResultsLoading] = useState(false)
 
   const handleSearch = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    setResultsLoading(true)
     setResults([])
     const newSearch = e.target.value || ""
     setSearch(newSearch)
 
     if (!newSearch) {
+      setResultsLoading(false)
       return setValidSearch(true)
     }
-    setValidSearch(isAddress(newSearch))
 
-    if (isAddress(newSearch)) {
+    const valid = isAddress(newSearch)
+    setValidSearch(valid)
+
+    if (!valid) {
+      return setResultsLoading(false)
+    }
+
+    if (valid) {
       // check if address is deployed contract
       // check if bytecode is mech
       // if not mech, check if address is nft collection
@@ -51,6 +61,7 @@ const Search = () => {
               type: "account",
             },
           ])
+          setResultsLoading(false)
           return
         }
 
@@ -62,6 +73,7 @@ const Search = () => {
             name: nftCollection.name,
           },
         ])
+        setResultsLoading(false)
       } else {
         // only an EOA
         setResults([
@@ -70,6 +82,7 @@ const Search = () => {
             type: "account",
           },
         ])
+        setResultsLoading(false)
       }
     }
   }
@@ -102,9 +115,10 @@ const Search = () => {
           <p>Please use a valid address</p>
         </div>
       )}
-      {results.length > 0 && (
+      {(resultsLoading || results.length > 0) && (
         <div className={classes.results}>
-          <SearchResults results={results} />
+          {results.length > 0 && <SearchResults results={results} />}
+          {resultsLoading && <Loading />}
         </div>
       )}
     </div>

frontend/src/routes/Mech/index.tsx

@@ -4,7 +4,7 @@ import Layout from "../../components/Layout"
 import NFTItem from "../../components/NFTItem"
 
 import classes from "./Mech.module.css"
-import Spinner from "../../components/Spinner"
+import Loading from "../../components/Loading"
 import MechConnect from "../../components/Connect"
 import { ProvideWalletConnect } from "../../hooks/useWalletConnect"
 import { useHandleRequest } from "../../hooks/useHandleRequest"
@@ -60,7 +60,7 @@ const Mech: React.FC = () => {
   return (
     <Layout>
       <div className={classes.container}>
-        {isLoading && <Spinner />}
+        {isLoading && <Loading />}
         {!error && !isLoading && nft && mechAddress && (
           <>
             <NFTItem nft={nft} chainId={chain.id} />