From 9d5ddcfccc41db44e8ff3d92685100f45a9587a1 Mon Sep 17 00:00:00 2001
From: ilya-bkv <i.yablokov@ccmp.me>
Date: Mon, 1 Apr 2024 07:16:53 +0300
Subject: [PATCH] Show saving status in ProfileSettings

---
 src/components/ProfileSettings/ProfileSettings.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/ProfileSettings/ProfileSettings.tsx b/src/components/ProfileSettings/ProfileSettings.tsx
index 70389ccb..1891ddeb 100644
--- a/src/components/ProfileSettings/ProfileSettings.tsx
+++ b/src/components/ProfileSettings/ProfileSettings.tsx
@@ -33,6 +33,7 @@ export const ProfileSettings = () => {
   const { t } = useLocalize()
   const [prevForm, setPrevForm] = createStore({})
   const [isFormInitialized, setIsFormInitialized] = createSignal(false)
+  const [isSaving, setIsSaving] = createSignal(false)
   const [social, setSocial] = createSignal([])
   const [addLinkForm, setAddLinkForm] = createSignal<boolean>(false)
   const [incorrectUrl, setIncorrectUrl] = createSignal<boolean>(false)
@@ -70,16 +71,20 @@ export const ProfileSettings = () => {
 
   const handleSubmit = async (event: Event) => {
     event.preventDefault()
+    setIsSaving(true)
     if (nameInputRef.current.value.length === 0) {
       setNameError(t('Required'))
       nameInputRef.current.focus()
+      setIsSaving(false)
       return
     }
     if (slugInputRef.current.value.length === 0) {
       setSlugError(t('Required'))
       slugInputRef.current.focus()
+      setIsSaving(false)
       return
     }
+
     try {
       await submit(form)
       setPrevForm(clone(form))
@@ -91,6 +96,8 @@ export const ProfileSettings = () => {
         return
       }
       showSnackbar({ type: 'error', body: t('Error') })
+    } finally {
+      setIsSaving(false)
     }
 
     await loadAuthor() // renews author's profile
@@ -359,7 +366,12 @@ export const ProfileSettings = () => {
                           }
                           onClick={handleCancel}
                         />
-                        <Button onClick={handleSubmit} variant="primary" value={t('Save settings')} />
+                        <Button
+                          onClick={handleSubmit}
+                          variant="primary"
+                          disabled={isSaving()}
+                          value={isSaving() ? t('Saving...') : t('Save settings')}
+                        />
                       </div>
                     </div>
                   </div>