From 0272d6b33288c1288d27ecce87553f27c3a4d5be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Poizat?= <hello@zatteo.com>
Date: Wed, 13 Dec 2023 10:16:35 +0100
Subject: [PATCH] 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.
---
 .../ducks/backup/components/BackupActions.jsx | 36 +++++++++++++++++--
 1 file changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/photos/ducks/backup/components/BackupActions.jsx b/src/photos/ducks/backup/components/BackupActions.jsx
index 56a23ff7c..ea3a7bf39 100644
--- a/src/photos/ducks/backup/components/BackupActions.jsx
+++ b/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 (