add loading overlay; fix playwright install

Author: devksingh4

Makefile

@@ -75,6 +75,7 @@ test_unit: install_test_deps
 	yarn test:unit
 
 test_e2e: install_test_deps
+	yarn playwright install
 	yarn test:e2e
 
 dev_health_check:

src/ui/pages/iam/GroupMemberManagement.tsx

@@ -15,6 +15,7 @@ import {
 import { IconTrash, IconUserPlus } from '@tabler/icons-react';
 import { notifications } from '@mantine/notifications';
 import { GroupMemberGetResponse, EntraActionResponse } from '@common/types/iam';
+import FullScreenLoader from '@ui/components/AuthContext/LoadingScreen';
 
 interface GroupMemberManagementProps {
   fetchMembers: () => Promise<GroupMemberGetResponse>;
@@ -29,7 +30,7 @@ export const GroupMemberManagement: React.FC<GroupMemberManagementProps> = ({
   const [toAdd, setToAdd] = useState<string[]>([]);
   const [toRemove, setToRemove] = useState<string[]>([]);
   const [email, setEmail] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
   const [confirmationModal, setConfirmationModal] = useState(false);
 
   useEffect(() => {
@@ -46,6 +47,7 @@ export const GroupMemberManagement: React.FC<GroupMemberManagementProps> = ({
       }
     };
     loadMembers();
+    setIsLoading(false);
   }, [fetchMembers]);
 
   const handleAddMember = () => {
@@ -132,7 +134,6 @@ export const GroupMemberManagement: React.FC<GroupMemberManagementProps> = ({
       setIsLoading(false);
     }
   };
-
   return (
     <Box p="md">
       <Text fw={500} mb={4}>
@@ -145,44 +146,47 @@ export const GroupMemberManagement: React.FC<GroupMemberManagementProps> = ({
           Current Members
         </Text>
         <ScrollArea style={{ height: 250 }}>
-          <List spacing="sm">
-            {members.map((member) => (
-              <ListItem key={member.email}>
-                <Group justify="space-between">
-                  <Box>
-                    <Text size="sm">
-                      {member.name} ({member.email})
-                    </Text>
-                    {toRemove.includes(member.email) && (
-                      <Badge color="red" size="sm">
-                        Queued for removal
+          {isLoading && <FullScreenLoader />}
+          {!isLoading && (
+            <List spacing="sm">
+              {members.map((member) => (
+                <ListItem key={member.email}>
+                  <Group justify="space-between">
+                    <Box>
+                      <Text size="sm">
+                        {member.name} ({member.email})
+                      </Text>
+                      {toRemove.includes(member.email) && (
+                        <Badge color="red" size="sm">
+                          Queued for removal
+                        </Badge>
+                      )}
+                    </Box>
+                    <ActionIcon
+                      color="red"
+                      variant="light"
+                      onClick={() => handleRemoveMember(member.email)}
+                      data-testid={`remove-exec-member-${member.email}`}
+                    >
+                      <IconTrash size={16} />
+                    </ActionIcon>
+                  </Group>
+                </ListItem>
+              ))}
+              {toAdd.map((member) => (
+                <ListItem key={member}>
+                  <Group justify="space-between">
+                    <Box>
+                      <Text size="sm">{member}</Text>
+                      <Badge color="green" size="sm">
+                        Queued for addition
                       </Badge>
-                    )}
-                  </Box>
-                  <ActionIcon
-                    color="red"
-                    variant="light"
-                    onClick={() => handleRemoveMember(member.email)}
-                    data-testid={`remove-exec-member-${member.email}`}
-                  >
-                    <IconTrash size={16} />
-                  </ActionIcon>
-                </Group>
-              </ListItem>
-            ))}
-            {toAdd.map((member) => (
-              <ListItem key={member}>
-                <Group justify="space-between">
-                  <Box>
-                    <Text size="sm">{member}</Text>
-                    <Badge color="green" size="sm">
-                      Queued for addition
-                    </Badge>
-                  </Box>
-                </Group>
-              </ListItem>
-            ))}
-          </List>
+                    </Box>
+                  </Group>
+                </ListItem>
+              ))}
+            </List>
+          )}
         </ScrollArea>
       </Box>