fix: Add a loading button between "Backup" request and flagship

answer

Backup page behavior is entirely controlled by backup state which is
handled by flagship app. Currently, flagship app can respond slowly
to backup requests when there are a lot of photos.

For example, when you click on "Backup", you can have seconds before
the button is disabled and the user sees the backup as started. So
here we fixed this UX issue by adding a loading button from when the
button is clicked to when the flagship app answer arrives.

This UX fix may not be necessary when the backup will be
optimized enough.

src/photos/ducks/backup/components/BackupActions.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 
 import Button from 'cozy-ui/transpiled/react/Buttons'
 import Icon from 'cozy-ui/transpiled/react/Icon'
@@ -11,6 +11,23 @@ import { useBackupActions } from '../hooks/useBackupActions'
 import { useBackupData } from '../hooks/useBackupData'
 import OpenBackupButton from 'photos/ducks/backup/components/OpenBackupButton'
 
+const DisabledLoadingBackupButton = () => {
+  const { t } = useI18n()
+
+  return (
+    <div className="u-mt-1-half u-flex u-flex-column u-flex-justify-center">
+      <Button
+        label={t('Backup.actions.startBackup')}
+        variant="primary"
+        disabled
+        startIcon={
+          <Icon icon={SpinnerIcon} spin aria-hidden focusable="false" />
+        }
+      />
+    </div>
+  )
+}
+
 const BackupActions = () => {
   const { t } = useI18n()
 
@@ -23,6 +40,14 @@ const BackupActions = () => {
     requestBackupPermissions
   } = useBackupActions()
 
+  const [statusToIgnore, setStatusToIgnore] = useState('')
+
+  useEffect(() => {
+    if (backupInfo?.currentBackup?.status !== statusToIgnore) {
+      setStatusToIgnore('')
+    }
+  }, [backupInfo?.currentBackup?.status, statusToIgnore])
+
   if (!backupPermissions) return null
 
   if (backupPermissions.granted) {
@@ -82,17 +107,22 @@ const BackupActions = () => {
           <OpenBackupButton />
         </div>
       )
-    } else {
+    } else if (mediasToBackupCount > 0 && status !== statusToIgnore) {
       return (
         <div className="u-mt-1-half u-flex u-flex-justify-center">
           <Button
             label={t('Backup.actions.startBackup')}
             variant="primary"
-            onClick={startBackup}
+            onClick={() => {
+              startBackup()
+              setStatusToIgnore(status)
+            }}
             startIcon={<Icon icon={SyncIcon} />}
           />
         </div>
       )
+    } else {
+      return <DisabledLoadingBackupButton />
     }
   } else {
     return (