feat(nui): Add scale fade transition to context menu

web/src/components/ContextMenu.tsx

@@ -9,6 +9,7 @@ import {
   PopoverContent,
   PopoverBody,
   Spacer,
+  ScaleFade,
 } from "@chakra-ui/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { debugData } from "../utils/debugData";
@@ -81,6 +82,7 @@ const ContextMenu: React.FC = () => {
       justifyContent="flex-end"
       alignItems="center"
     >
+      <ScaleFade in={visible} unmountOnExit>
         <Box w="xs" h={580}>
           <Box borderRadius="md" bg="gray.800" mb={3}>
             <Text
@@ -155,11 +157,13 @@ const ContextMenu: React.FC = () => {
                         <PopoverBody>
                           {option[1]?.metadata &&
                           Array.isArray(option[1].metadata) ? (
-                          option[1].metadata.map((metadata: string, index) => (
+                            option[1].metadata.map(
+                              (metadata: string, index) => (
                                 <Text key={`context-metadata-${index}`}>
                                   {metadata}
                                 </Text>
-                          ))
+                              )
+                            )
                           ) : (
                             <>
                               {typeof option[1].metadata === "object" &&
@@ -181,6 +185,7 @@ const ContextMenu: React.FC = () => {
             ))}
           </Box>
         </Box>
+      </ScaleFade>
     </Flex>
   );
 };