From a3c3cecb9937ec6741f2163634fd6a60513ca76c Mon Sep 17 00:00:00 2001
From: Eivind Dalholt <eivind.dalholt@gmail.com>
Date: Sun, 12 Nov 2023 15:54:04 +0100
Subject: [PATCH] fix: add visual loading bar to lobby (#205)

* fix: add visual loading bar to lobby

* style: blue button
---
 frontend/src/components/OrganizerGroupBox.tsx | 2 --
 frontend/src/components/OrganizerList.tsx     | 3 ---
 frontend/src/components/QrCode.tsx            | 2 +-
 frontend/src/pages/AssemblyPage.tsx           | 8 ++++++--
 4 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/OrganizerGroupBox.tsx b/frontend/src/components/OrganizerGroupBox.tsx
index bfed397..2ca2608 100644
--- a/frontend/src/components/OrganizerGroupBox.tsx
+++ b/frontend/src/components/OrganizerGroupBox.tsx
@@ -108,7 +108,6 @@ export function OrganizerGroupBox({
                 className={
                   breakMedium ? classes.buttonStyle : classes.smallButtonStyle
                 }
-                color="gray"
                 onClick={() => handleEditAssemblyClick(group)}
                 data-testid={editAssemblyTestID}
               >
@@ -120,7 +119,6 @@ export function OrganizerGroupBox({
               className={
                 breakMedium ? classes.buttonStyle : classes.smallButtonStyle
               }
-              color="gray"
               onClick={() => handleEditAssemblyClick(group)}
               data-testid={editAssemblyTestID}
             >
diff --git a/frontend/src/components/OrganizerList.tsx b/frontend/src/components/OrganizerList.tsx
index 4205094..0477da2 100644
--- a/frontend/src/components/OrganizerList.tsx
+++ b/frontend/src/components/OrganizerList.tsx
@@ -72,6 +72,3 @@ export function OrganizerList() {
     </>
   );
 }
-function then(arg0: () => void) {
-  throw new Error("Function not implemented.");
-}
diff --git a/frontend/src/components/QrCode.tsx b/frontend/src/components/QrCode.tsx
index 3609b0a..3cf488b 100644
--- a/frontend/src/components/QrCode.tsx
+++ b/frontend/src/components/QrCode.tsx
@@ -22,7 +22,7 @@ export function QrCode() {
   }, []);
 
   return !QRData ? (
-    <Loader></Loader>
+    <Loader />
   ) : (
     <QRCodeSVG
       bgColor="#ffffff"
diff --git a/frontend/src/pages/AssemblyPage.tsx b/frontend/src/pages/AssemblyPage.tsx
index 53194ba..3aa1b43 100644
--- a/frontend/src/pages/AssemblyPage.tsx
+++ b/frontend/src/pages/AssemblyPage.tsx
@@ -6,7 +6,7 @@ import { WaitingRoom } from "../components/WaitingRoom";
 import { VotationBox } from "../components/VotationBox";
 import { isUserInAssembly } from "../services/assembly";
 import { checkedInState, checkedInType } from "../utils/Context";
-import { Box, Image, Text } from "@mantine/core";
+import { Box, Image, Loader, Text } from "@mantine/core";
 import Arrow from "../assets/Arrow.svg";
 import { getCurrentVotationByGroup } from "../services/votation";
 import { LimitedVoteType } from "../types/votes";
@@ -15,6 +15,7 @@ import { NotFound } from "./NotFound";
 
 export function AssemblyLobby() {
   let navigate = useNavigate();
+  const [isLoading, setLoading] = useState<boolean>(true);
   const { groupSlug } = useParams() as { groupSlug: string };
   const [groupName, setGroupName] = useState<string | undefined>(undefined);
   const [groupNotFound, setGroupNotFound] = useState<boolean>(false);
@@ -28,7 +29,7 @@ export function AssemblyLobby() {
   const { lastMessage, getWebSocket } = useWebSocket(
     import.meta.env.VITE_SOCKET_URL + "/lobby",
     {
-      //Will attempt to reconnect on all close events, such as server shutting down
+      // Will attempt to reconnect on all close events, such as server shutting down
       shouldReconnect: () => !kickedOut,
       // Try to reconnect 300 times before giving up.
       // Also possible to change interval (default is 5000ms)
@@ -54,6 +55,7 @@ export function AssemblyLobby() {
       } else {
         setCheckedIn(false);
       }
+      setLoading(false);
     };
     const getGroupName = async () => {
       const userData = await getUserData();
@@ -112,6 +114,8 @@ export function AssemblyLobby() {
   return groupNotFound ? (
     // Render 404 not found component if group is not found
     <NotFound />
+  ) : isLoading ? (
+    <Loader />
   ) : (
     <>
       {!checkedIn && (