fix dialog flicker (#3790)

target · Apr 23, 2024 · 7aaf9ed · 7aaf9ed
1 parent a094946
commit 7aaf9ed
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 68 deletions.
diff --git a/web/src/app/users/UserContactMethodList.tsx b/web/src/app/users/UserContactMethodList.tsx
@@ -1,4 +1,4 @@
-import React, { useState, ReactNode } from 'react'
+import React, { useState, ReactNode, Suspense } from 'react'
 import { gql, useQuery } from 'urql'
 import FlatList from '../lists/FlatList'
 import { Button, Card, CardHeader, Grid, IconButton } from '@mui/material'
@@ -208,39 +208,41 @@ export default function UserContactMethodList(
           }))}
           emptyMessage='No contact methods'
         />
-        {showAddDialog && (
-          <UserContactMethodCreateDialog
-            userID={props.userID}
-            onClose={(contactMethodID = '') => {
-              setShowAddDialog(false)
-              setShowVerifyDialogByID(contactMethodID)
-            }}
-          />
-        )}
-        {showVerifyDialogByID && (
-          <UserContactMethodVerificationDialog
-            contactMethodID={showVerifyDialogByID}
-            onClose={() => setShowVerifyDialogByID('')}
-          />
-        )}
-        {showEditDialogByID && (
-          <UserContactMethodEditDialog
-            contactMethodID={showEditDialogByID}
-            onClose={() => setShowEditDialogByID('')}
-          />
-        )}
-        {showDeleteDialogByID && (
-          <UserContactMethodDeleteDialog
-            contactMethodID={showDeleteDialogByID}
-            onClose={() => setShowDeleteDialogByID('')}
-          />
-        )}
-        {showSendTestByID && (
-          <SendTestDialog
-            messageID={showSendTestByID}
-            onClose={() => setShowSendTestByID('')}
-          />
-        )}
+        <Suspense>
+          {showAddDialog && (
+            <UserContactMethodCreateDialog
+              userID={props.userID}
+              onClose={(contactMethodID = '') => {
+                setShowAddDialog(false)
+                setShowVerifyDialogByID(contactMethodID)
+              }}
+            />
+          )}
+          {showVerifyDialogByID && (
+            <UserContactMethodVerificationDialog
+              contactMethodID={showVerifyDialogByID}
+              onClose={() => setShowVerifyDialogByID('')}
+            />
+          )}
+          {showEditDialogByID && (
+            <UserContactMethodEditDialog
+              contactMethodID={showEditDialogByID}
+              onClose={() => setShowEditDialogByID('')}
+            />
+          )}
+          {showDeleteDialogByID && (
+            <UserContactMethodDeleteDialog
+              contactMethodID={showDeleteDialogByID}
+              onClose={() => setShowDeleteDialogByID('')}
+            />
+          )}
+          {showSendTestByID && (
+            <SendTestDialog
+              messageID={showSendTestByID}
+              onClose={() => setShowSendTestByID('')}
+            />
+          )}
+        </Suspense>
       </Card>
     </Grid>
   )

diff --git a/web/src/app/users/UserContactMethodListDest.tsx b/web/src/app/users/UserContactMethodListDest.tsx
@@ -1,4 +1,4 @@
-import React, { useState, ReactNode } from 'react'
+import React, { useState, ReactNode, Suspense } from 'react'
 import { gql, useQuery } from 'urql'
 import FlatList from '../lists/FlatList'
 import { Button, Card, CardHeader, Grid, IconButton } from '@mui/material'
@@ -229,39 +229,41 @@ export default function UserContactMethodListDest(
           })}
           emptyMessage='No contact methods'
         />
-        {showAddDialog && (
-          <UserContactMethodCreateDialog
-            userID={props.userID}
-            onClose={(contactMethodID = '') => {
-              setShowAddDialog(false)
-              setShowVerifyDialogByID(contactMethodID)
-            }}
-          />
-        )}
-        {showVerifyDialogByID && (
-          <UserContactMethodVerificationDialog
-            contactMethodID={showVerifyDialogByID}
-            onClose={() => setShowVerifyDialogByID('')}
-          />
-        )}
-        {showEditDialogByID && (
-          <UserContactMethodEditDialog
-            contactMethodID={showEditDialogByID}
-            onClose={() => setShowEditDialogByID('')}
-          />
-        )}
-        {showDeleteDialogByID && (
-          <UserContactMethodDeleteDialog
-            contactMethodID={showDeleteDialogByID}
-            onClose={() => setShowDeleteDialogByID('')}
-          />
-        )}
-        {showSendTestByID && (
-          <SendTestDialog
-            messageID={showSendTestByID}
-            onClose={() => setShowSendTestByID('')}
-          />
-        )}
+        <Suspense>
+          {showAddDialog && (
+            <UserContactMethodCreateDialog
+              userID={props.userID}
+              onClose={(contactMethodID = '') => {
+                setShowAddDialog(false)
+                setShowVerifyDialogByID(contactMethodID)
+              }}
+            />
+          )}
+          {showVerifyDialogByID && (
+            <UserContactMethodVerificationDialog
+              contactMethodID={showVerifyDialogByID}
+              onClose={() => setShowVerifyDialogByID('')}
+            />
+          )}
+          {showEditDialogByID && (
+            <UserContactMethodEditDialog
+              contactMethodID={showEditDialogByID}
+              onClose={() => setShowEditDialogByID('')}
+            />
+          )}
+          {showDeleteDialogByID && (
+            <UserContactMethodDeleteDialog
+              contactMethodID={showDeleteDialogByID}
+              onClose={() => setShowDeleteDialogByID('')}
+            />
+          )}
+          {showSendTestByID && (
+            <SendTestDialog
+              messageID={showSendTestByID}
+              onClose={() => setShowSendTestByID('')}
+            />
+          )}
+        </Suspense>
       </Card>
     </Grid>
   )