From 21f27c0c0a224ac041a30d77aa78f5541f2810d9 Mon Sep 17 00:00:00 2001
From: Sergey Mankovsky <sergey@monadical.com>
Date: Tue, 17 Dec 2024 14:06:05 +0100
Subject: [PATCH] Room loading spinner

---
 www/app/[roomName]/page.tsx | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/www/app/[roomName]/page.tsx b/www/app/[roomName]/page.tsx
index 782b87ab..c28a2ee3 100644
--- a/www/app/[roomName]/page.tsx
+++ b/www/app/[roomName]/page.tsx
@@ -2,7 +2,7 @@
 
 import "@whereby.com/browser-sdk/embed";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Box, Button, Text, VStack, HStack } from "@chakra-ui/react";
+import { Box, Button, Text, VStack, HStack, Spinner } from "@chakra-ui/react";
 import useRoomMeeting from "./useRoomMeeting";
 import { useRouter } from "next/navigation";
 import useSessionStatus from "../lib/useSessionStatus";
@@ -44,6 +44,27 @@ export default function Room(details: RoomDetails) {
     };
   }, [handleLeave, roomUrl, isLoading, isAuthenticated]);
 
+  if (isLoading) {
+    return (
+      <Box
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        height="100vh"
+        bg="gray.50"
+        p={4}
+      >
+        <Spinner
+          thickness="4px"
+          speed="0.65s"
+          emptyColor="gray.200"
+          color="blue.500"
+          size="xl"
+        />
+      </Box>
+    );
+  }
+
   if (!isAuthenticated && !consentGiven) {
     return (
       <Box