Merge pull request #1592 from appwrite/fix-create-repo-responsiveness

Fix ui state when creating repository

src/lib/components/git/newRepository.svelte

@@ -8,6 +8,7 @@
     export let installations: Models.InstallationList;
     export let repositoryName: string;
     export let repositoryPrivate = true;
+    export let disableFields = false;
 </script>
 
 <Layout.Stack gap="l">
@@ -15,6 +16,7 @@
         <InputSelect
             id="installation"
             label="Git organization"
+            disabled={disableFields}
             options={installations.installations.map((entry) => {
                 return {
                     label: entry.organization,
@@ -32,9 +34,11 @@
         id="repositoryName"
         label="Repository name"
         placeholder="my-repository"
+        disabled={disableFields}
         bind:value={repositoryName} />
     <InputChoice
         id="repositoryPrivate"
         label="Keep repository private"
+        disabled={disableFields}
         bind:value={repositoryPrivate} />
 </Layout.Stack>

src/lib/elements/forms/button.svelte

@@ -27,6 +27,7 @@
     let classes: string = '';
     export { classes as class };
     export let submissionLoader = false;
+    export let forceShowLoader = false;
 
     const isSubmitting = hasContext('form')
         ? getContext<FormContext>('form').isSubmitting
@@ -85,7 +86,7 @@
         aria-label={ariaLabel}
         type={submit ? 'submit' : 'button'}
         --button-width={fullWidth ? '100%' : undefined}>
-        {#if $isSubmitting && submissionLoader}
+        {#if ($isSubmitting && submissionLoader) || (forceShowLoader && submissionLoader)}
             <span
                 class="loader is-small"
                 style:--p-loader-base-full-color="transparent"

src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte

@@ -33,6 +33,7 @@
     export let data;
 
     let showExitModal = false;
+    let isCreatingRepository = false;
     let hasInstallations = !!data?.installations?.total;
 
     let formComponent: Form;
@@ -80,6 +81,7 @@
 
     async function createRepository() {
         try {
+            isCreatingRepository = true;
             const repo = await sdk.forProject.vcs.createRepository(
                 $installation.$id,
                 repositoryName,
@@ -93,6 +95,8 @@
                 type: 'error',
                 message: error.message
             });
+        } finally {
+            isCreatingRepository = false;
         }
     }
 
@@ -220,12 +224,13 @@
                 </Layout.Stack>
                 {#if connectBehaviour === 'now'}
                     {#if hasInstallations}
-                        <Fieldset legend="Git repositoy">
+                        <Fieldset legend="Git repository">
                             <Layout.Stack gap="xl">
                                 <RepositoryBehaviour bind:repositoryBehaviour />
                                 {#if repositoryBehaviour === 'new'}
                                     <NewRepository
                                         bind:selectedInstallationId
+                                        disableFields={isCreatingRepository}
                                         installations={data.installations}
                                         bind:repositoryName
                                         bind:repositoryPrivate />
@@ -235,7 +240,11 @@
                                         <Button
                                             size="s"
                                             on:click={createRepository}
-                                            disabled={!repositoryName || !$installation?.$id}>
+                                            forceShowLoader
+                                            submissionLoader={isCreatingRepository}
+                                            disabled={!repositoryName ||
+                                                !$installation?.$id ||
+                                                isCreatingRepository}>
                                             Create
                                         </Button>
                                     </Layout.Stack>