feat(creation): added spinner when creating huge notes

CorentinTh · Sep 17, 2024 · 2af7cef · 2af7cef
1 parent f37ff8a
commit 2af7cef
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 6 deletions.
diff --git a/packages/app-client/src/locales/en.json b/packages/app-client/src/locales/en.json
@@ -75,7 +75,8 @@
         "title": "Drop files here",
         "description": "Drag and drop files here to attach them to the note"
       },
-      "create": "Create note"
+      "create": "Create note",
+      "creating": "Creating note..."
     },
     "success": {
       "title": "Note created successfully",

diff --git a/packages/app-client/src/locales/es.json b/packages/app-client/src/locales/es.json
@@ -75,7 +75,8 @@
         "title": "Suelte los archivos aquí",
         "description": "Arrastre y suelte los archivos aquí para adjuntarlos a la nota"
       },
-      "create": "Crear nota"
+      "create": "Crear nota",
+      "creating": "Creando nota..."
     },
     "success": {
       "title": "Nota creada con éxito",

diff --git a/packages/app-client/src/locales/fr.json b/packages/app-client/src/locales/fr.json
@@ -75,7 +75,8 @@
         "title": "Déposez les fichiers ici",
         "description": "Glissez et déposez les fichiers ici pour les joindre à la note"
       },
-      "create": "Créer une note"
+      "create": "Créer une note",
+      "creating": "Création en cours..."
     },
     "success": {
       "title": "Note créée avec succès",

diff --git a/packages/app-client/src/modules/notes/pages/create-note.page.tsx b/packages/app-client/src/modules/notes/pages/create-note.page.tsx
@@ -29,6 +29,7 @@ export const CreateNotePage: Component = () => {
   const [getTtlInSeconds, setTtlInSeconds] = createSignal(3600);
   const [getDeleteAfterReading, setDeleteAfterReading] = createSignal(false);
   const [getUploadedFiles, setUploadedFiles] = createSignal<File[]>([]);
+  const [getIsNoteCreating, setIsNoteCreating] = createSignal(false);
 
   const { t } = useI18n();
 
@@ -47,6 +48,7 @@ export const CreateNotePage: Component = () => {
     setTtlInSeconds(3600);
     setDeleteAfterReading(false);
     setUploadedFiles([]);
+    setIsNoteCreating(false);
   }
 
   onMount(() => {
@@ -68,6 +70,8 @@ export const CreateNotePage: Component = () => {
       return;
     }
 
+    setIsNoteCreating(true);
+
     const [createdNote, error] = await safely(encryptAndCreateNote({
       content: getContent(),
       password: getPassword(),
@@ -77,6 +81,8 @@ export const CreateNotePage: Component = () => {
       isPublic: getIsPublic(),
     }));
 
+    setIsNoteCreating(false);
+
     if (!error) {
       const { noteUrl } = createdNote;
 
@@ -199,9 +205,9 @@ export const CreateNotePage: Component = () => {
                 {t('create.settings.attach-files')}
               </FileUploaderButton>
 
-              <Button class="mt-2 w-full" onClick={createNote}>
-                <div class="i-tabler-plus mr-2 text-lg text-muted-foreground"></div>
-                {t('create.settings.create')}
+              <Button class="mt-2 w-full" onClick={createNote} disabled={getIsNoteCreating()}>
+                <div class={cn('mr-2 text-lg text-muted-foreground', getIsNoteCreating() ? 'i-tabler-loader-2 animate-spin' : 'i-tabler-plus')}></div>
+                {getIsNoteCreating() ? t('create.settings.creating') : t('create.settings.create')}
               </Button>
             </div>