Merge pull request #35 from videosdk-live/feature/fix-loading-message

channges

Author: ChintanRajpara

src/components/WaitingToJoin.js

@@ -1,13 +1,36 @@
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
 import useResponsiveSize from "../utils/useResponsiveSize";
 import animationData from "../../src/animations/join_meeting.json";
 import Lottie from "react-lottie";
+import { Box } from "@material-ui/core";
 
 const WaitingToJoin = () => {
+  const waitingMessages = [
+    { index: 0, text: "Creating a room for you..." },
+    { index: 1, text: "Almost there..." },
+  ];
+  const [message, setMessage] = useState(waitingMessages[0]);
+
+  const intervalRef = useRef(null);
+
+  useEffect(() => {
+    intervalRef.current = setInterval(() => {
+      setMessage((s) =>
+        s.index === waitingMessages.length - 1
+          ? s
+          : waitingMessages[s.index + 1]
+      );
+    }, 3000);
+
+    return () => {
+      clearInterval(intervalRef.current);
+    };
+  }, []);
+
   const lottieSize = useResponsiveSize({
-    xl: 500,
-    lg: 500,
-    md: 400,
+    xl: 250,
+    lg: 250,
+    md: 200,
     sm: 200,
     xs: 180,
   });
@@ -30,12 +53,17 @@ const WaitingToJoin = () => {
         height: "100vh",
       }}
     >
-      <Lottie
-        options={defaultOptions}
-        eventListeners={[{ eventName: "done" }]}
-        height={lottieSize}
-        width={lottieSize}
-      />
+      <Box style={{ display: "flex", flexDirection: "column" }}>
+        <Lottie
+          options={defaultOptions}
+          eventListeners={[{ eventName: "done" }]}
+          height={lottieSize}
+          width={lottieSize}
+        />
+        <h2 style={{ color: "white", marginTop: 4, textAlign: "center" }}>
+          {message.text}
+        </h2>
+      </Box>
     </div>
   );
 };