add sweetAlert

src/Components/MeetingLayout/MeetingLayout.tsx

 import React, { useEffect, useRef, useState } from 'react'
 import { Box } from '@mui/material'
 import { useTheme, Theme } from '@mui/material/styles'
+import Swal from 'sweetalert2' // Import SweetAlert2
 import { useRemoteUsers, usePublish, useRTCClient, useClientEvent } from 'agora-rtc-react'
 import SymmetricGrid from '../SymmetricGrid/SymmetricGrid'
 import PinnedGrid from '../PinnedGrid/PinnedGrid'
@@ -33,6 +34,7 @@ const MeetingLayout = ({ setJoined, localCameraTrack, localMicrophoneTrack }: Pr
   const [isPinned, setIsPinned] = useState(false)
   const [pinnedUser, setPinnedUser] = useState<IAgoraRTCRemoteUser | null>(null)
   const [isCaptionEnable, setIsCaptionEnable] = useState(false)
+  const [isMeetingStarted, setIsMeetingStarted] = useState(false)
 
   useEffect(() => {
     setTotalUsers(remoteUsers.length + 1)
@@ -53,6 +55,22 @@ const MeetingLayout = ({ setJoined, localCameraTrack, localMicrophoneTrack }: Pr
 
   useClientEvent(agoraEngine, 'user-left', handleUserLeft)
 
+  // Show a popup when the meeting starts
+  useEffect(() => {
+    if (!isMeetingStarted) {
+      void Swal.fire({
+        title: 'Meeting Started',
+        text: 'Sign language prediction might be delayed due to the live meeting.',
+        icon: 'info',
+        timer: 5000, // Display the popup for 5 seconds
+        timerProgressBar: true,
+        willClose: () => {
+          setIsMeetingStarted(true)
+        },
+      })
+    }
+  }, [isMeetingStarted])
+
   return (
     <Box
       sx={{