♻️(frontend) move InviteDialog state down the React tree

The InviteDialog open state was managed very high in the React tree,
which triggered a re-render of the whole conference tree whenever
the dialog was opened or closed.

Push the state down to a narrower component to limit the scope of
re-renders.

Part of a broader effort to isolate as much as possible what should
re-render, so we can then focus on tackling the real performance
issues.

src/frontend/src/features/rooms/components/Conference.tsx

@@ -170,7 +170,6 @@ export const Conference = ({
     prepareConnection()
   }, [room, apiConfig, isConnectionWarmedUp])
 
-  const [showInviteDialog, setShowInviteDialog] = useState(mode === 'create')
   const [mediaDeviceError, setMediaDeviceError] = useState<{
     error: MediaDeviceFailure | null
     kind: MediaDeviceKind | null
@@ -303,13 +302,7 @@ export const Conference = ({
           }}
         >
           <VideoConference />
-          {showInviteDialog && !isMobile && (
+          {!isMobile && <InviteDialog mode={mode} />}
-            <InviteDialog
-              isOpen={showInviteDialog}
-              onOpenChange={setShowInviteDialog}
-              onClose={() => setShowInviteDialog(false)}
-            />
-          )}
           <MediaDeviceErrorAlert
             {...mediaDeviceError}
             onClose={() => setMediaDeviceError({ error: null, kind: null })}

src/frontend/src/features/rooms/components/InviteDialog.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import { getRouteUrl } from '@/navigation/getRouteUrl'
-import { Div, Button, type DialogProps, P, Bold } from '@/primitives'
+import { Div, Button, P, Bold } from '@/primitives'
 import { HStack, styled, VStack } from '@/styled-system/jsx'
 import { Heading, Dialog } from 'react-aria-components'
 import { Text, text } from '@/primitives/Text'
@@ -10,7 +10,7 @@ import {
   RiFileCopyLine,
   RiSpam2Fill,
 } from '@remixicon/react'
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import { css } from '@/styled-system/css'
 import { useRoomData } from '@/features/rooms/livekit/hooks/useRoomData'
 import { ApiAccessLevel } from '@/features/rooms/api/ApiRoom'
@@ -39,7 +39,9 @@ const StyledRACDialog = styled(Dialog, {
   },
 })
 
-export const InviteDialog = (props: Omit<DialogProps, 'title'>) => {
+export const InviteDialog = ({ mode }: { mode: 'join' | 'create' }) => {
+  const [showInviteDialog, setShowInviteDialog] = useState(mode === 'create')
+
   const { t } = useTranslation('rooms', { keyPrefix: 'shareDialog' })
 
   const roomData = useRoomData()
@@ -58,163 +60,161 @@ export const InviteDialog = (props: Omit<DialogProps, 'title'>) => {
     copyRoomUrlToClipboard,
   } = useCopyRoomToClipboard(roomData)
 
+  if (!showInviteDialog) return null
   return (
-    <StyledRACDialog {...props}>
+    <StyledRACDialog>
-      {({ close }) => (
+      <VStack
-        <VStack
+        alignItems="left"
-          alignItems="left"
+        justify="start"
-          justify="start"
+        gap={0}
-          gap={0}
+        style={{ maxWidth: '100%', overflow: 'visible' }}
-          style={{ maxWidth: '100%', overflow: 'visible' }}
+      >
-        >
+        <Heading slot="title" level={2} className={text({ variant: 'h2' })}>
-          <Heading slot="title" level={2} className={text({ variant: 'h2' })}>
+          {t('heading')}
-            {t('heading')}
+        </Heading>
-          </Heading>
+        <Div position="absolute" top="5" right="5">
-          <Div position="absolute" top="5" right="5">
+          <Button
-            <Button
+            invisible
-              invisible
+            variant="tertiaryText"
-              variant="tertiaryText"
+            size="xs"
-              size="xs"
+            onPress={() => {
-              onPress={() => {
+              setShowInviteDialog(false)
-                props.onClose?.()
+            }}
-                close()
+            aria-label={t('closeDialog')}
-              }}
+          >
-              aria-label={t('closeDialog')}
+            <RiCloseLine />
-            >
+          </Button>
-              <RiCloseLine />
+        </Div>
-            </Button>
+        <P>{t('description')}</P>
-          </Div>
+        {isTelephonyReadyForUse ? (
-          <P>{t('description')}</P>
+          <div
-          {isTelephonyReadyForUse ? (
+            className={css({
+              width: '100%',
+              display: 'flex',
+              flexDirection: 'column',
+              marginTop: '0.5rem',
+              gap: '1rem',
+              overflow: 'visible',
+            })}
+          >
             <div
               className={css({
-                width: '100%',
                 display: 'flex',
-                flexDirection: 'column',
+                alignItems: 'center',
-                marginTop: '0.5rem',
+                justifyContent: 'space-between',
-                gap: '1rem',
-                overflow: 'visible',
               })}
             >
-              <div
+              <Text as="p" wrap="pretty">
-                className={css({
+                {roomUrl?.replace(/^https?:\/\//, '')}
-                  display: 'flex',
+              </Text>
-                  alignItems: 'center',
+              {isTelephonyReadyForUse && roomUrl && (
-                  justifyContent: 'space-between',
+                <Button
-                })}
+                  variant={isRoomUrlCopied ? 'success' : 'tertiaryText'}
-              >
+                  square
-                <Text as="p" wrap="pretty">
+                  size={'sm'}
-                  {roomUrl?.replace(/^https?:\/\//, '')}
+                  onPress={copyRoomUrlToClipboard}
-                </Text>
+                  aria-label={isRoomUrlCopied ? t('copied') : t('copyUrl')}
-                {isTelephonyReadyForUse && roomUrl && (
+                  tooltip={isRoomUrlCopied ? t('copied') : t('copyUrl')}
-                  <Button
+                >
-                    variant={isRoomUrlCopied ? 'success' : 'tertiaryText'}
+                  {isRoomUrlCopied ? (
-                    square
+                    <RiCheckLine aria-hidden="true" />
-                    size={'sm'}
+                  ) : (
-                    onPress={copyRoomUrlToClipboard}
+                    <RiFileCopyLine aria-hidden="true" />
-                    aria-label={isRoomUrlCopied ? t('copied') : t('copyUrl')}
+                  )}
-                    tooltip={isRoomUrlCopied ? t('copied') : t('copyUrl')}
+                </Button>
-                  >
+              )}
-                    {isRoomUrlCopied ? (
-                      <RiCheckLine aria-hidden="true" />
-                    ) : (
-                      <RiFileCopyLine aria-hidden="true" />
-                    )}
-                  </Button>
-                )}
-              </div>
-              <div
-                className={css({
-                  display: 'flex',
-                  flexDirection: 'column',
-                })}
-              >
-                <Text as="p" wrap="pretty">
-                  <Bold>{t('phone.call')}</Bold> ({telephony?.country}){' '}
-                  {telephony?.internationalPhoneNumber}
-                </Text>
-                <Text as="p" wrap="pretty">
-                  <Bold>{t('phone.pinCode')}</Bold>{' '}
-                  {formatPinCode(roomData?.pin_code)}
-                </Text>
-              </div>
-
-              <Button
-                variant={isCopied ? 'success' : 'secondaryText'}
-                size="sm"
-                fullWidth
-                aria-label={isCopied ? t('copied') : t('copy')}
-                style={{
-                  justifyContent: 'start',
-                }}
-                onPress={copyRoomToClipboard}
-                data-attr="share-dialog-copy"
-              >
-                {isCopied ? (
-                  <>
-                    <RiCheckLine
-                      size={18}
-                      style={{ marginRight: '8px' }}
-                      aria-hidden="true"
-                    />
-                    {t('copied')}
-                  </>
-                ) : (
-                  <>
-                    <RiFileCopyLine
-                      style={{ marginRight: '6px', minWidth: '18px' }}
-                      aria-hidden="true"
-                    />
-                    {t('copy')}
-                  </>
-                )}
-              </Button>
             </div>
-          ) : (
+            <div
+              className={css({
+                display: 'flex',
+                flexDirection: 'column',
+              })}
+            >
+              <Text as="p" wrap="pretty">
+                <Bold>{t('phone.call')}</Bold> ({telephony?.country}){' '}
+                {telephony?.internationalPhoneNumber}
+              </Text>
+              <Text as="p" wrap="pretty">
+                <Bold>{t('phone.pinCode')}</Bold>{' '}
+                {formatPinCode(roomData?.pin_code)}
+              </Text>
+            </div>
+
             <Button
-              variant={isCopied ? 'success' : 'tertiary'}
+              variant={isCopied ? 'success' : 'secondaryText'}
+              size="sm"
               fullWidth
               aria-label={isCopied ? t('copied') : t('copy')}
+              style={{
+                justifyContent: 'start',
+              }}
               onPress={copyRoomToClipboard}
               data-attr="share-dialog-copy"
             >
               {isCopied ? (
                 <>
-                  <RiCheckLine size={24} style={{ marginRight: '8px' }} />
+                  <RiCheckLine
+                    size={18}
+                    style={{ marginRight: '8px' }}
+                    aria-hidden="true"
+                  />
                   {t('copied')}
                 </>
               ) : (
                 <>
-                  <RiFileCopyLine size={24} style={{ marginRight: '8px' }} />
+                  <RiFileCopyLine
-                  {t('copyUrl')}
+                    style={{ marginRight: '6px', minWidth: '18px' }}
+                    aria-hidden="true"
+                  />
+                  {t('copy')}
                 </>
               )}
             </Button>
-          )}
+          </div>
-          {roomData?.access_level === ApiAccessLevel.PUBLIC && (
+        ) : (
-            <HStack>
+          <Button
-              <div
+            variant={isCopied ? 'success' : 'tertiary'}
+            fullWidth
+            aria-label={isCopied ? t('copied') : t('copy')}
+            onPress={copyRoomToClipboard}
+            data-attr="share-dialog-copy"
+          >
+            {isCopied ? (
+              <>
+                <RiCheckLine size={24} style={{ marginRight: '8px' }} />
+                {t('copied')}
+              </>
+            ) : (
+              <>
+                <RiFileCopyLine size={24} style={{ marginRight: '8px' }} />
+                {t('copyUrl')}
+              </>
+            )}
+          </Button>
+        )}
+        {roomData?.access_level === ApiAccessLevel.PUBLIC && (
+          <HStack>
+            <div
+              className={css({
+                backgroundColor: 'primary.200',
+                borderRadius: '50%',
+                padding: '4px',
+                marginTop: '1rem',
+              })}
+            >
+              <RiSpam2Fill
+                size={22}
                 className={css({
-                  backgroundColor: 'primary.200',
+                  fill: 'primary.500',
-                  borderRadius: '50%',
-                  padding: '4px',
-                  marginTop: '1rem',
                 })}
-              >
+              />
-                <RiSpam2Fill
+            </div>
-                  size={22}
+            <Text variant="sm" style={{ marginTop: '1rem' }}>
-                  className={css({
+              {t('permissions')}
-                    fill: 'primary.500',
+            </Text>
-                  })}
+          </HStack>
-                />
+        )}
-              </div>
+      </VStack>
-              <Text variant="sm" style={{ marginTop: '1rem' }}>
-                {t('permissions')}
-              </Text>
-            </HStack>
-          )}
-        </VStack>
-      )}
     </StyledRACDialog>
   )
 }