rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: show spinner when loading vault collaboration info

Browse Source
This commit is contained in:
Aman Harwara
2023-09-13 01:46:26 +05:30
parent b17b25666b
commit 2a0fdeedd6
1 changed files with 27 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/EditVaultModal.tsx
View File

@@ -24,6 +24,7 @@ import Popover from '@/Components/Popover/Popover'
import IconPicker from '@/Components/Icon/IconPicker' import IconPicker from '@/Components/Icon/IconPicker'
import ModalOverlay from '@/Components/Modal/ModalOverlay' import ModalOverlay from '@/Components/Modal/ModalOverlay'
import { Disclosure, DisclosureContent, useDisclosureStore } from '@ariakit/react' import { Disclosure, DisclosureContent, useDisclosureStore } from '@ariakit/react'
import Spinner from '@/Components/Spinner/Spinner'
const EditVaultModalContent: FunctionComponent<{ const EditVaultModalContent: FunctionComponent<{
existingVaultUuid?: string existingVaultUuid?: string
@@ -38,6 +39,7 @@ const EditVaultModalContent: FunctionComponent<{
const [iconString, setIconString] = useState<VectorIconNameOrEmoji>('safe-square') const [iconString, setIconString] = useState<VectorIconNameOrEmoji>('safe-square')
const [members, setMembers] = useState<SharedVaultUserServerHash[]>([]) const [members, setMembers] = useState<SharedVaultUserServerHash[]>([])
const [invites, setInvites] = useState<SharedVaultInviteServerHash[]>([]) const [invites, setInvites] = useState<SharedVaultInviteServerHash[]>([])
const [isLoadingCollaborationInfo, setIsLoadingCollaborationInfo] = useState(false)
const [isAdmin, setIsAdmin] = useState(true) const [isAdmin, setIsAdmin] = useState(true)
const [passwordType, setPasswordType] = useState<KeySystemPasswordType>(KeySystemPasswordType.Randomized) const [passwordType, setPasswordType] = useState<KeySystemPasswordType>(KeySystemPasswordType.Randomized)
const [keyStorageMode, setKeyStorageMode] = useState<KeySystemRootKeyStorageMode>(KeySystemRootKeyStorageMode.Synced) const [keyStorageMode, setKeyStorageMode] = useState<KeySystemRootKeyStorageMode>(KeySystemRootKeyStorageMode.Synced)
@@ -66,6 +68,7 @@ const EditVaultModalContent: FunctionComponent<{
existingVault.isSharedVaultListing() && application.vaultUsers.isCurrentUserSharedVaultAdmin(existingVault), existingVault.isSharedVaultListing() && application.vaultUsers.isCurrentUserSharedVaultAdmin(existingVault),
) )
setIsLoadingCollaborationInfo(true)
const users = await application.vaultUsers.getSharedVaultUsers(existingVault) const users = await application.vaultUsers.getSharedVaultUsers(existingVault)
if (users) { if (users) {
setMembers(users) setMembers(users)
@@ -75,6 +78,7 @@ const EditVaultModalContent: FunctionComponent<{
if (!isClientDisplayableError(invites)) { if (!isClientDisplayableError(invites)) {
setInvites(invites) setInvites(invites)
} }
setIsLoadingCollaborationInfo(false)
} }
}, [application, existingVault]) }, [application, existingVault])
@@ -233,7 +237,7 @@ const EditVaultModalContent: FunctionComponent<{
return ( return (
<Modal title={existingVault ? 'Edit Vault' : 'Create New Vault'} close={handleDialogClose} actions={modalActions}> <Modal title={existingVault ? 'Edit Vault' : 'Create New Vault'} close={handleDialogClose} actions={modalActions}>
<div className="flex w-full flex-col space-y-3.5 px-4.5 pb-3 pt-3"> <div className="flex w-full flex-col space-y-3.5 px-4.5 py-4">
<div> <div>
<div className="text-lg">Vault Info</div> <div className="text-lg">Vault Info</div>
<div className="mt-1">The vault name and description are end-to-end encrypted.</div> <div className="mt-1">The vault name and description are end-to-end encrypted.</div>
@@ -287,12 +291,28 @@ const EditVaultModalContent: FunctionComponent<{
}} }}
/> />
</div> </div>
{existingVault && canShowMembers && ( {existingVault ? (
<VaultModalMembers vault={existingVault} members={members} onChange={reloadVaultInfo} isAdmin={isAdmin} /> isLoadingCollaborationInfo ? (
)} <div className="flex items-center gap-3 py-2 text-base">
{existingVault && invites.length > 0 && ( <Spinner className="h-5 w-5" />
<VaultModalInvites invites={invites} onChange={reloadVaultInfo} isAdmin={isAdmin} /> Loading collaboration info...
)} </div>
) : (
<>
{canShowMembers && (
<VaultModalMembers
vault={existingVault}
members={members}
onChange={reloadVaultInfo}
isAdmin={isAdmin}
/>
)}
{invites.length > 0 && (
<VaultModalInvites invites={invites} onChange={reloadVaultInfo} isAdmin={isAdmin} />
)}
</>
)
) : null}
<Disclosure <Disclosure
store={advancedOptionsDisclosure} store={advancedOptionsDisclosure}
className="flex items-center justify-between focus:shadow-none focus:outline-none" className="flex items-center justify-between focus:shadow-none focus:outline-none"