chore: add loading spinner in the network menu to show it is trying to change

Author: lucaslovato

source/components/Header/Menus/NetworkMenu.tsx

@@ -11,6 +11,7 @@ import arrow from 'assets/images/arrow.png';
 import btcIcon from 'assets/images/btcIcon.svg';
 import ethIcon from 'assets/images/ethIcon.svg';
 import { Icon } from 'components/index';
+import Spinner from 'components/Spinner/Spinner';
 import { useUtils } from 'hooks/index';
 import { useController } from 'hooks/useController';
 import { dispatchChangeNetworkBgEvent } from 'scripts/Background/utils/bgActions';
@@ -45,6 +46,7 @@ export const NetworkMenu: React.FC<INetworkComponent> = (
   );
   const {
     activeAccount: { type: activeAccountType },
+    isNetworkChanging,
   } = useSelector((state: RootState) => state.vault);
 
   const activeNetwork = useSelector(
@@ -127,6 +129,7 @@ export const NetworkMenu: React.FC<INetworkComponent> = (
             >
               {networkType}
             </span>
+            {isNetworkChanging && <Spinner size={16} color="#ffffff" />}
 
             <img
               src={arrow}

source/components/Spinner/Spinner.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+const Spinner: React.FC<{ color?: string; size?: number }> = ({
+  size = 16,
+  color = '#ffffff',
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 38 38"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke={color}
+  >
+    <g fill="none" fillRule="evenodd">
+      <g transform="translate(1 1)" strokeWidth="2">
+        <circle strokeOpacity=".5" cx="18" cy="18" r="18" />
+        <path d="M36 18c0-9.94-8.06-18-18-18">
+          <animateTransform
+            attributeName="transform"
+            type="rotate"
+            from="0 18 18"
+            to="360 18 18"
+            dur="1s"
+            repeatCount="indefinite"
+          />
+        </path>
+      </g>
+    </g>
+  </svg>
+);
+
+export default Spinner;

source/pages/SwitchNetwork/NetworkList.tsx

@@ -32,6 +32,7 @@ export const NetworkList = ({ isChanging }: { isChanging: boolean }) => {
   const [selectedNetwork, setSelectedNetwork] = useState<string>(
     isBitcoinBased ? 'EVM' : 'UTXO'
   );
+  const [isLoading, setIsLoading] = useState(false);
 
   const {
     networkThatNeedsChanging,
@@ -53,6 +54,7 @@ export const NetworkList = ({ isChanging }: { isChanging: boolean }) => {
 
   const handleChangeNetwork = async (network: INetwork, chain: string) => {
     try {
+      setIsLoading(true);
       store.dispatch(setOpenDAppErrorModal(false));
 
       await controllerEmitter(['wallet', 'setActiveNetwork'], [network, chain]);
@@ -62,6 +64,8 @@ export const NetworkList = ({ isChanging }: { isChanging: boolean }) => {
       navigate('/home');
     } catch (networkError) {
       window.close();
+    } finally {
+      setIsLoading(false);
     }
   };
 
@@ -182,22 +186,17 @@ export const NetworkList = ({ isChanging }: { isChanging: boolean }) => {
           ))}
         </div>
         <div className="mt-4">
-          {/* <div className="flex justify-center items-center gap-2 mb-4">
-            <img src={networkImg} alt="Network Icon" />
-            <span className="underline text-white font-normal text-sm">
-              Add new network
-            </span>
-          </div> */}
           <Button
             type="submit"
-            disabled={!selectCurrentNetwork?.current}
+            disabled={!selectCurrentNetwork?.current || isLoading}
             onClick={() =>
               handleChangeNetwork(
                 selectCurrentNetwork?.current,
                 selectCurrentNetwork?.chain
               )
             }
             className={`${isButtonDisabledBgStyle} rounded-[100px] w-[19.5rem] h-[40px] text-brand-blue400 text-base font-medium`}
+            loading={isLoading}
           >
             Connect
           </Button>