From 63f534397f07581230b6758830acd1f0fef6668b Mon Sep 17 00:00:00 2001
From: Ali Mahdiyar <alimahdiyar77@gmail.com>
Date: Sun, 21 Apr 2024 17:52:13 +0330
Subject: [PATCH] (feat) handle loading state for computation

---
 packages/nextjs/app/page.tsx | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
index 04686f1..9b9d140 100644
--- a/packages/nextjs/app/page.tsx
+++ b/packages/nextjs/app/page.tsx
@@ -219,9 +219,12 @@ const Home: NextPage = () => {
     }
   }
 
+  const [computing, setComputing] = useState(false);
+
   // compute on secrets
   async function handleCompute() {
     if (programId) {
+      setComputing(true);
       // await compute(
       //   nillion,
       //   nillionClient,
@@ -263,6 +266,7 @@ const Home: NextPage = () => {
         console.log("error", error);
         return "error";
       }
+      setComputing(false);
     }
   }
 
@@ -413,15 +417,19 @@ const Home: NextPage = () => {
                                   value={partyIdToSecretIds}
                                   onChange={e => setPartyIdToSecretIds(e.target.value)}
                                 />
-                                <button
-                                  disabled={!programId}
-                                  onClick={handleCompute}
-                                  className={`mt-4 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 ${
-                                    !programId ? "opacity-75 cursor-not-allowed bg-indigo-400" : "bg-indigo-600"
-                                  }`}
-                                >
-                                  Compute
-                                </button>
+                                {computing ? (
+                                  "Computing..."
+                                ) : (
+                                  <button
+                                    disabled={!programId}
+                                    onClick={handleCompute}
+                                    className={`mt-4 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 ${
+                                      !programId ? "opacity-75 cursor-not-allowed bg-indigo-400" : "bg-indigo-600"
+                                    }`}
+                                  >
+                                    Compute
+                                  </button>
+                                )}
                               </div>
                             ) : (
                               <button