Disable panels animation because it's buggy

Author: nyakaspeter

client/src/app/main/Main.jsx

@@ -3,7 +3,6 @@ import { HamburgerIcon } from '@chakra-ui/icons';
 import { Box, Flex } from '@chakra-ui/layout';
 import { useBreakpointValue } from '@chakra-ui/media-query';
 import { Drawer, DrawerContent, DrawerOverlay } from '@chakra-ui/modal';
-import { Fade } from '@chakra-ui/transition';
 import React from 'react';
 import { useSocket } from '../../core/query';
 import { useUiState } from '../../core/store';
@@ -21,30 +20,25 @@ const Main = () => {
   return (
     <>
       <Flex w="100vw" h="100vh" position="relative">
-        <Box position="absolute" top={4} left={3}>
-          <Fade
-            in={!uiState.showRoomList.value}
-            transition={{
-              enter: { delay: 0.25 },
-            }}
-          >
+        {!uiState.showRoomList.value && (
+          <Box position="absolute" top={4} left={3}>
             <IconButton
               onClick={handleToggleRoomList}
               borderRadius="full"
               zIndex={2}
             >
               <HamburgerIcon />
             </IconButton>
-          </Fade>
-        </Box>
-
-        <RoomList
-          flex="1"
-          maxW={permanentDrawer && uiState.showRoomList.value ? '360px' : '0px'}
-          overflow="hidden"
-          borderRightWidth="1px"
-          transition="max-width 0.25s"
-        />
+          </Box>
+        )}
+        {permanentDrawer && uiState.showRoomList.value && (
+          <RoomList
+            flex="1"
+            maxW="360px"
+            overflow="hidden"
+            borderRightWidth="1px"
+          />
+        )}
         <Room flex="3" />
       </Flex>
 

client/src/app/main/call/VideoGrid.jsx

@@ -14,10 +14,7 @@ const VideoGrid = props => {
   const uiState = useUiState();
 
   useEffect(
-    () =>
-      setTimeout(() => {
-        if (updateLayout?.current) updateLayout.current();
-      }, 250),
+    () => updateLayout.current(),
     [uiState.currentPanel.value, uiState.showRoomList.value]
   );
 

client/src/app/main/room/Room.jsx

@@ -77,20 +77,17 @@ const Room = props => {
               )}
             </VStack>
 
-            <SidePanel
-              flex="1"
-              maxW={
-                permanentDrawer && !!uiState.currentPanel.value
-                  ? '360px'
-                  : '0px'
-              }
-              overflow="hidden"
-              borderLeftWidth="1px"
-              transition="max-width 0.25s"
-              title={uiState.currentPanel?.title?.value}
-              content={uiState.currentPanel?.content?.value}
-              room={room.data}
-            />
+            {permanentDrawer && !!uiState.currentPanel.value && (
+              <SidePanel
+                flex="1"
+                maxW="360px"
+                overflow="hidden"
+                borderLeftWidth="1px"
+                title={uiState.currentPanel?.title?.value}
+                content={uiState.currentPanel?.content?.value}
+                room={room.data}
+              />
+            )}
 
             <Drawer
               placement="right"