Adds loading to join room button

adityathakurxd · Mar 11, 2024 · e661240 · e661240
1 parent e6496e5
commit e661240
Showing 1 changed file with 13 additions and 2 deletions.
diff --git a/app/components/JoinForm.tsx b/app/components/JoinForm.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { ArrowRightIcon, Svg100MsLogoIcon } from '@100mslive/react-icons'
+import { ArrowRightIcon, RefreshIcon, Svg100MsLogoIcon } from '@100mslive/react-icons'
 import { useHMSActions } from '@100mslive/react-sdk'
 import Image from 'next/image'
 import { useState, ChangeEvent, FormEvent, useEffect } from 'react'
@@ -21,6 +21,7 @@ const JoinForm = () => {
 
 	const searchParams = useSearchParams()
 	const roomCodeParam = searchParams.get('room') || ''
+	const [loading, setLoading] = useState(false)
 
 	const handleTabClick = (tab) => {
 		setActiveTabRole(tab)
@@ -42,6 +43,7 @@ const JoinForm = () => {
 	// Type the event parameter
 	const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
 		e.preventDefault()
+		setLoading(true)
 
 		const { name: userName = '', roomCode = '' } = inputValues
 
@@ -97,9 +99,11 @@ const JoinForm = () => {
 						await hmsActions.join({ userName, authToken })
 					}
 				} else {
+					setLoading(false)
 					alert('Failed to create a new room')
 				}
 			} catch (e) {
+				setLoading(false)
 				alert('Failed to join room')
 			}
 		}
@@ -152,7 +156,14 @@ const JoinForm = () => {
 					)}
 
 					<button type="submit" className="btn-primary primary">
-						{roomCodeParam ? 'Accept Invite' : 'Join Room'}
+						{loading ? (
+							<RefreshIcon style={{ animation: 'spin 2s linear infinite' }} />
+						) : roomCodeParam ? (
+							'Accept Invite'
+						) : (
+							'Join Room'
+						)}
+
 						<ArrowRightIcon height={20} width={20} style={{ marginLeft: '4px' }} />
 					</button>
 				</form>