Merge branch 'fixes-for-launch' of https://github.com/adityathakurxd/…

…make-real into fixes-for-launch
adityathakurxd · Mar 11, 2024 · 286c4f8 · 286c4f8
2 parents a57a70a + e741459
commit 286c4f8
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 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>

diff --git a/app/components/PollForm.tsx b/app/components/PollForm.tsx
@@ -6,6 +6,7 @@ import { useQuestionContext } from '../context'
 import { makeReal } from '../makeReal'
 import { useEditor, useToasts } from '@tldraw/tldraw'
 import { toast } from 'react-toastify'
+import { RefreshIcon } from '@100mslive/react-icons'
 
 interface PollFormProps {
 	onClose: () => void
@@ -18,6 +19,7 @@ const PollForm: React.FC<PollFormProps> = ({ onClose }) => {
 
 	const { questionData, setQuestionData } = useQuestionContext()
 	const [localQuestionData, setLocalQuestionData] = useState(questionData)
+	const [loading, setLoading] = useState(false)
 
 	useEffect(() => {
 		setLocalQuestionData(questionData)
@@ -33,8 +35,10 @@ const PollForm: React.FC<PollFormProps> = ({ onClose }) => {
 					},
 					question
 				)
+				setLoading(false)
 			} catch (e) {
 				console.error(e)
+				setLoading(false)
 				addToast({
 					icon: 'cross-2',
 					title: 'Something went wrong',
@@ -126,9 +130,16 @@ const PollForm: React.FC<PollFormProps> = ({ onClose }) => {
 						width: 120,
 						padding: 8,
 					}}
-					onClick={() => regenerateQuestion(localQuestionData.question)}
+					onClick={() => {
+						setLoading(true)
+						regenerateQuestion(localQuestionData.question)
+					}}
 				>
-					Regenerate
+					{loading ? (
+						<RefreshIcon style={{ animation: 'spin 2s linear infinite' }} />
+					) : (
+						'Regenerate'
+					)}
 				</button>
 				<button className="primary" onClick={createPollOnClick}>
 					Launch Poll