better flow for submitting

packages/desktop/src/app.tsx

@@ -21,7 +21,7 @@ root.render(
       maxSnack={3}
       anchorOrigin={{
         vertical: 'top',
-        horizontal: 'right',
+        horizontal: 'left',
       }}
     >
       <ErrorParent>

packages/desktop/src/components/NewConversationDialog.tsx

@@ -34,7 +34,7 @@ export default function NewConversationDialog({
 }: {
   open: boolean;
   handleClose: () => void;
-  handleSubmit: (selectedUsers: User[], conversationName?: string) => void;
+  handleSubmit: (selectedUsers: User[], conversationName?: string) => Promise<void>;
 }) {
   const { enqueueSnackbar } = useSnackbar();
   const { user } = useAuth();
@@ -112,7 +112,7 @@ export default function NewConversationDialog({
 
     setIsSubmitting(true);
 
-    handleSubmit(selectedUsers, conversationName);
+    await handleSubmit(selectedUsers, conversationName);
 
     // clear form for next time
     setSelectedUsers([]);
@@ -148,74 +148,68 @@ export default function NewConversationDialog({
           <FiX />
         </IconButton>
 
-        {isSubmitting ? (
+        <Container
-          <CircularProgress />
+          maxWidth="sm"
-        ) : (
+          sx={{
-          <Container
+            display: 'flex',
-            maxWidth="sm"
+            flexDirection: 'column',
-            sx={{
+            gap: 5,
-              display: 'flex',
+          }}
-              flexDirection: 'column',
+        >
-              gap: 5,
+          <Typography variant="h4">Start a Conversation</Typography>
-            }}
-          >
-            <Typography variant="h4">Start a Conversation</Typography>
 
-            <Autocomplete
+          <Autocomplete
-              multiple
+            multiple
-              loading={searching}
+            loading={searching}
-              includeInputInList
+            includeInputInList
-              id="tags-outlined"
+            id="tags-outlined"
-              autoHighlight
+            autoHighlight
-              onInputChange={handleChangeSearchInput}
+            onInputChange={handleChangeSearchInput}
-              options={searchUsersResults}
+            options={searchUsersResults}
-              renderOption={renderOption}
+            renderOption={renderOption}
-              getOptionLabel={(option) =>
+            getOptionLabel={(option) => (typeof option === 'string' ? option : option.displayName)}
-                typeof option === 'string' ? option : option.displayName
+            value={selectedUsers}
-              }
+            onChange={handleChangeSelections}
-              value={selectedUsers}
+            filterSelectedOptions
-              onChange={handleChangeSelections}
+            isOptionEqualToValue={(optionUser, valueUser) => optionUser.id === valueUser.id}
-              filterSelectedOptions
+            filterOptions={(options) => options}
-              isOptionEqualToValue={(optionUser, valueUser) => optionUser.id === valueUser.id}
+            inputValue={searchVal}
-              filterOptions={(options) => options}
+            renderInput={(params) => (
-              inputValue={searchVal}
-              renderInput={(params) => (
-                <TextField
-                  // eslint-disable-next-line jsx-a11y/no-autofocus
-                  autoFocus
-                  fullWidth
-                  label="People"
-                  {...params}
-                  placeholder="Search by name or email"
-                />
-              )}
-            />
-
-            {selectedUsers.length > 1 && (
               <TextField
-                value={conversationName}
+                // eslint-disable-next-line jsx-a11y/no-autofocus
-                onChange={handleChangeName}
+                autoFocus
                 fullWidth
-                label="Name (optional)"
+                label="People"
-                placeholder="Channel, subject line, whatever..."
+                {...params}
+                placeholder="Search by name or email"
               />
             )}
+          />
 
-            <Stack justifyContent={'flex-end'} direction={'row'} spacing={2}>
+          {selectedUsers.length > 1 && (
-              <Button onClick={handleClose} variant={'text'}>
+            <TextField
-                Cancel
+              value={conversationName}
-              </Button>
+              onChange={handleChangeName}
-              <Button
+              fullWidth
-                onClick={handleSubmitLocal}
+              label="Name (optional)"
-                disabled={selectedUsers.length === 0}
+              placeholder="Channel, subject line, whatever..."
-                variant={'contained'}
+            />
-                color="primary"
+          )}
-              >
+
-                Connect
+          <Stack justifyContent={'flex-end'} direction={'row'} spacing={2}>
-              </Button>
+            <Button onClick={handleClose} variant={'text'}>
-            </Stack>
+              Cancel
-          </Container>
+            </Button>
-        )}
+            <Button
+              onClick={handleSubmitLocal}
+              disabled={selectedUsers.length === 0 || isSubmitting}
+              variant={'contained'}
+              color="primary"
+            >
+              {isSubmitting ? <CircularProgress /> : 'Connect'}
+            </Button>
+          </Stack>
+        </Container>
       </Container>
     </Dialog>
   );