Feature: Loading indicator for connecting & receiving data channel

sites/dapp-ui/src/App.tsx

@@ -79,6 +79,7 @@ export default function ProviderApp() {
   const [status, setStatus] = useState<'connected' | 'disconnected'>(
     'disconnected',
   );
+  const [loading, setLoading] = useState<boolean>(false);
   useEffect(() => {
     if (!client) return;
     function handleDataChannel(dc: RTCDataChannel) {
@@ -91,6 +92,7 @@ export default function ProviderApp() {
           }
         }
       }
+      setLoading(false);
       setDataChannel(dc);
     }
     client.on('offer-description', (description) => {
@@ -114,6 +116,7 @@ export default function ProviderApp() {
     client.on('connect', handleSocketConnect);
     function handleLinkMessage(msg: LinkMessage) {
       console.log('LinkMessage', msg);
+      setLoading(true);
       setAddress(msg.wallet);
     }
     client.on('link-message', handleLinkMessage);
@@ -138,6 +141,8 @@ export default function ProviderApp() {
         setClient,
         status,
         setStatus,
+        loading,
+        setLoading,
         dataChannel,
         setDataChannel,
       }}

sites/dapp-ui/src/components/ConnectModal.tsx

@@ -4,6 +4,7 @@ import Button from '@mui/material/Button';
 import Modal from '@mui/material/Modal';
 import { useState } from 'react';
 import { Fade } from '@mui/material';
+import CircularProgress from '@mui/material/CircularProgress';
 import { useNavigate } from 'react-router-dom';
 import { useSignalClient } from '@/hooks/useSignalClient.ts';
 import { SignalClient } from '@algorandfoundation/liquid-client';
@@ -28,15 +29,15 @@ export function ConnectModal({
   color,
 }: {
   color?:
-    | 'inherit'
-    | 'primary'
-    | 'secondary'
-    | 'success'
-    | 'error'
-    | 'info'
-    | 'warning';
+  | 'inherit'
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'error'
+  | 'info'
+  | 'warning';
 }) {
-  const { client, dataChannel } = useSignalClient();
+  const { client, loading, dataChannel } = useSignalClient();
   const navigate = useNavigate();
   const [requestId] = useState(SignalClient.generateRequestId());
 
@@ -130,6 +131,22 @@ export function ConnectModal({
                       top: '50%',
                     }}
                   />
+                  {loading && (
+                    <Box
+                      sx={{
+                        position: 'absolute',
+                        top: '50%',
+                        left: '50%',
+                        transform: 'translate(-50%, -50%)',
+                        height: '80px',
+                        width: '80px',
+                      }}
+                    >    
+                      <CircularProgress
+                        size={80}
+                      />
+                    </Box>
+                  )}
                 </Box>
               </Box>
             </Fade>

sites/dapp-ui/src/hooks/useSignalClient.ts

@@ -18,17 +18,21 @@ export const SignalClientContext = createContext({
   setStatus: (_: 'connected' | 'disconnected') => {
     console.log(_);
   },
+  loading: false,
+  setLoading: (_: boolean) => {
+    console.log(_);
+  },
   dataChannel: null,
   setDataChannel: (_: RTCDataChannel) => {
     console.log(_);
   },
 } as SignalClientState);
 
 export function useSignalClient() {
-  const { client, status, dataChannel } = useContext(SignalClientContext);
+  const { client, status, loading, dataChannel } = useContext(SignalClientContext);
   if (!client)
     throw new Error(
       'SignalClient not found, make sure to wrap your component with <SignalClientProvider>',
     );
-  return { client, status, dataChannel };
+  return { client, status, loading, dataChannel };
 }