Block UI on click

pages/index.js

@@ -5,6 +5,7 @@ import { COMMANDS } from "../cmds"
 import useCurrentUser from "../hooks/use-current-user"
 import useConfig from "../hooks/use-config"
 import { init } from "@onflow/fcl-wc"
+import Loading from "./loading"
 import Image from "next/image"
 import "../flow/config"
 
@@ -16,31 +17,30 @@ const WC_METADATA = {
   icons: ["https://avatars.githubusercontent.com/u/62387156?s=280&v=4"],
 }
 
-const renderCommand = (d, setStatus) => {
-  return (
-    <li key={d.LABEL}>
-      <button
-        onClick={async () => {
-          setStatus("pending...")
-          setStatus(await d.CMD())
-        }}
-      >
-        {d.LABEL}
-      </button>
-    </li>
-  )
-}
-
 export default function Home() {
   const currentUser = useCurrentUser()
   const config = useConfig()
   const [services, setServices] = useState([])
+  const [isLoading, setIsLoading] = useState(false)
   const discoveryWalletInputRef = useRef(null)
-  const [status, setStatus] = useState(null)
+
+  const renderCommand = d => {
+    return (
+      <li key={d.LABEL}>
+        <button onClick={() => clickHandler(d.CMD)}>{d.LABEL}</button>
+      </li>
+    )
+  }
+
+  async function clickHandler(fn, args = null) {
+    setIsLoading(true)
+    await fn(args)
+    setIsLoading(false)
+  }
 
   useEffect(() => {
     const initAdapter = async () => {
-      const { FclWcServicePlugin, client } = await init({
+      const { FclWcServicePlugin } = await init({
         projectId: WC_PROJECT_ID,
         metadata: WC_METADATA,
         includeBaseWC: true,
@@ -73,8 +73,7 @@ export default function Home() {
 
   return (
     <div>
-      <ul>{COMMANDS.map(cmd => renderCommand(cmd, setStatus))}</ul>
-      <pre>Status: {status ?? ""}</pre>
+      <ul>{COMMANDS.map(cmd => renderCommand(cmd))}</ul>
       <div>
         {services?.map(service => (
           <span key={service.provider.address}>
@@ -84,20 +83,20 @@ export default function Home() {
               width={25}
               height={25}
             />
-            <button onClick={() => fcl.authenticate({ service })}>
+            <button onClick={() => clickHandler(fcl.authenticate, { service })}>
               Login with {service.provider.name}
             </button>
           </span>
         ))}
       </div>
       <div style={{ marginTop: "12px" }}>
         <label htmlFor="manual-wallet">
-          Manually set "discovery.wallet" config:{" "}
+          {'Manually set "discovery.wallet" config:'}
         </label>
         <input ref={discoveryWalletInputRef} name="manual-wallet"></input>
         <button
-          onClick={async () =>
-            await fcl
+          onClick={() =>
+            fcl
               .config()
               .put("discovery.wallet", discoveryWalletInputRef?.current?.value)
           }
@@ -106,6 +105,7 @@ export default function Home() {
         </button>
       </div>
       <pre>{JSON.stringify({ currentUser, config }, null, 2)}</pre>
+      {isLoading ? <Loading /> : null}
     </div>
   )
 }

pages/loading.js

@@ -0,0 +1,9 @@
+export default function Loading() {
+  return (
+    <div>
+      <div className="loading style-2">
+        <div className="loading-wheel"></div>
+      </div>
+    </div>
+  )
+}

styles/globals.css

@@ -14,3 +14,50 @@ a {
 * {
   box-sizing: border-box;
 }
+
+.loading {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.loading-wheel {
+  width: 20px;
+  height: 20px;
+  margin-top: -40px;
+  margin-left: -40px;
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+
+  border-width: 30px;
+  border-radius: 50%;
+  -webkit-animation: spin 1s linear infinite;
+  animation: spin 1s linear infinite;
+}
+.style-2 .loading-wheel {
+  border-style: double;
+  border-color: #ccc transparent;
+}
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(-360deg);
+  }
+}
+
+@keyframes spin {
+  0% {
+    -webkit-transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(-360deg);
+  }
+}