feat: add setup page connecting state

getAlby · Jan 18, 2024 · cac5a21 · cac5a21
1 parent 09cc94d
commit cac5a21
Showing 1 changed file with 32 additions and 9 deletions.
diff --git a/frontend/src/screens/Setup.tsx b/frontend/src/screens/Setup.tsx
@@ -1,19 +1,22 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
+import Loading from "src/components/Loading";
 import { useCSRF } from "src/hooks/useCSRF";
 import { useInfo } from "src/hooks/useInfo";
 import { BackendType } from "src/types";
 import { request, handleRequestError } from "src/utils/request";
 
 export function Setup() {
   const [backendType, setBackendType] = React.useState<BackendType>("BREEZ");
+  const [isConnecting, setConnecting] = React.useState(false);
   const navigate = useNavigate();
 
   const { data: info } = useInfo();
   const { data: csrf } = useCSRF();
 
   async function handleSubmit(data: object) {
     try {
+      setConnecting(true);
       if (!csrf) {
         throw new Error("info not loaded");
       }
@@ -32,6 +35,8 @@ export function Setup() {
       navigate("/apps");
     } catch (error) {
       handleRequestError("Failed to connect", error);
+    } finally {
+      setConnecting(false);
     }
   }
 
@@ -63,28 +68,46 @@ export function Setup() {
         <option value={"LND"}>LND</option>
       </select>
 
-      {backendType === "BREEZ" && <BreezForm handleSubmit={handleSubmit} />}
-      {backendType === "LND" && <LNDForm handleSubmit={handleSubmit} />}
+      {backendType === "BREEZ" && (
+        <BreezForm handleSubmit={handleSubmit} isConnecting={isConnecting} />
+      )}
+      {backendType === "LND" && (
+        <LNDForm handleSubmit={handleSubmit} isConnecting={isConnecting} />
+      )}
     </>
   );
 }
 
-function ConnectButton() {
+type ConnectButtonProps = {
+  isConnecting: boolean;
+};
+
+function ConnectButton({ isConnecting }: ConnectButtonProps) {
   return (
     <button
       type="submit"
-      className="mt-4 inline-flex w-full bg-purple-700 cursor-pointer dark:text-neutral-200 duration-150 focus-visible:ring-2 focus-visible:ring-offset-2 focus:outline-none font-medium hover:bg-purple-900 items-center justify-center px-5 py-3 rounded-md shadow text-white transition"
+      className={`mt-4 gap-2 inline-flex w-full ${
+        isConnecting ? "bg-gray-300 dark:bg-gray-700" : "bg-purple-700"
+      } cursor-pointer dark:text-neutral-200 duration-150 focus-visible:ring-2 focus-visible:ring-offset-2 focus:outline-none font-medium hover:bg-purple-900 items-center justify-center px-5 py-3 rounded-md shadow text-white transition`}
+      disabled={isConnecting}
     >
-      Connect
+      {isConnecting ? (
+        <>
+          <Loading /> Connecting...
+        </>
+      ) : (
+        <>Connect</>
+      )}
     </button>
   );
 }
 
 type SetupFormProps = {
+  isConnecting: boolean;
   handleSubmit(data: unknown): void;
 };
 
-function BreezForm({ handleSubmit }: SetupFormProps) {
+function BreezForm({ isConnecting, handleSubmit }: SetupFormProps) {
   const [greenlightInviteCode, setGreenlightInviteCode] =
     React.useState<string>("");
   const [breezMnemonic, setBreezMnemonic] = React.useState<string>("");
@@ -133,12 +156,12 @@ function BreezForm({ handleSubmit }: SetupFormProps) {
           className="bg-gray-50 border border-gray-300 text-gray-900 focus:ring-purple-700 dark:focus:ring-purple-600 dark:ring-offset-gray-800 focus:ring-2 text-sm rounded-lg block w-full p-2.5 dark:bg-surface-00dp dark:border-gray-700 dark:placeholder-gray-400 dark:text-white"
         />
       </>
-      <ConnectButton />
+      <ConnectButton isConnecting={isConnecting} />
     </form>
   );
 }
 
-function LNDForm({ handleSubmit }: SetupFormProps) {
+function LNDForm({ isConnecting, handleSubmit }: SetupFormProps) {
   const [lndAddress, setLndAddress] = React.useState<string>("");
   const [lndCertHex, setLndCertHex] = React.useState<string>("");
   const [lndMacaroonHex, setLndMacaroonHex] = React.useState<string>("");
@@ -202,7 +225,7 @@ function LNDForm({ handleSubmit }: SetupFormProps) {
           className="bg-gray-50 border border-gray-300 text-gray-900 focus:ring-purple-700 dark:focus:ring-purple-600 dark:ring-offset-gray-800 focus:ring-2 text-sm rounded-lg block w-full p-2.5 dark:bg-surface-00dp dark:border-gray-700 dark:placeholder-gray-400 dark:text-white"
         />
       </>
-      <ConnectButton />
+      <ConnectButton isConnecting={isConnecting} />
     </form>
   );
 }