fix(team): show create dialog loading fallback
This commit is contained in:
parent
c04871747c
commit
7f12c12922
1 changed files with 55 additions and 1 deletions
|
|
@ -6,6 +6,13 @@ import { api, isElectronMode } from '@renderer/api';
|
|||
import { confirm } from '@renderer/components/common/ConfirmDialog';
|
||||
import { Badge } from '@renderer/components/ui/badge';
|
||||
import { Button } from '@renderer/components/ui/button';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@renderer/components/ui/dialog';
|
||||
import { Input } from '@renderer/components/ui/input';
|
||||
import {
|
||||
Tooltip,
|
||||
|
|
@ -45,6 +52,7 @@ import {
|
|||
Copy,
|
||||
FolderOpen,
|
||||
GitBranch,
|
||||
Loader2,
|
||||
Play,
|
||||
RotateCcw,
|
||||
Search,
|
||||
|
|
@ -84,6 +92,45 @@ const LaunchTeamDialog = lazy(() =>
|
|||
import('./dialogs/LaunchTeamDialog').then((m) => ({ default: m.LaunchTeamDialog }))
|
||||
);
|
||||
|
||||
interface CreateTeamDialogLoadingFallbackProps {
|
||||
readonly isCopy: boolean;
|
||||
readonly onClose: () => void;
|
||||
}
|
||||
|
||||
const CreateTeamDialogLoadingFallback = ({
|
||||
isCopy,
|
||||
onClose,
|
||||
}: CreateTeamDialogLoadingFallbackProps): React.JSX.Element => {
|
||||
const { t } = useAppTranslation('team');
|
||||
const { t: tCommon } = useAppTranslation('common');
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open
|
||||
onOpenChange={(nextOpen) => {
|
||||
if (!nextOpen) {
|
||||
onClose();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DialogContent className="max-w-sm">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-sm">
|
||||
{isCopy ? t('create.title.copy') : t('create.title.create')}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="sr-only" aria-live="polite">
|
||||
{tCommon('states.loading')}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="flex items-center gap-2 rounded-md border border-[var(--color-border)] bg-[var(--color-surface-overlay)] px-3 py-2 text-xs text-[var(--color-text-muted)]">
|
||||
<Loader2 className="size-3.5 animate-spin" />
|
||||
<span>{tCommon('states.loading')}</span>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
function generateUniqueName(sourceName: string, existingNames: string[]): string {
|
||||
const base = sourceName.replace(/-\d+$/, '');
|
||||
const existing = new Set(existingNames);
|
||||
|
|
@ -1021,7 +1068,14 @@ export const TeamListView = memo(function TeamListView(): React.JSX.Element {
|
|||
}
|
||||
|
||||
const createDialogElement = showCreateDialog && (
|
||||
<Suspense fallback={null}>
|
||||
<Suspense
|
||||
fallback={
|
||||
<CreateTeamDialogLoadingFallback
|
||||
isCopy={copyData != null}
|
||||
onClose={handleCreateDialogClose}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<CreateTeamDialog
|
||||
open={showCreateDialog}
|
||||
canCreate={canCreate}
|
||||
|
|
|
|||
Loading…
Reference in a new issue