From a4772202af594e8a3612eee170c6e0aef9f5d7b5 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Mon, 29 Jan 2024 17:00:23 +0700
Subject: [PATCH] fix: add loader when user change folder

---
 web/containers/Layout/index.tsx                    |  1 -
 web/screens/Settings/Advanced/DataFolder/index.tsx | 11 +++++++++--
 web/screens/Settings/index.tsx                     |  1 +
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/web/containers/Layout/index.tsx b/web/containers/Layout/index.tsx
index 033038bad0..e7bde49c03 100644
--- a/web/containers/Layout/index.tsx
+++ b/web/containers/Layout/index.tsx
@@ -27,7 +27,6 @@ const BaseLayout = (props: PropsWithChildren) => {
   useEffect(() => {
     if (localStorage.getItem(SUCCESS_SET_NEW_DESTINATION) === 'true') {
       setMainViewState(MainViewState.Settings)
-      localStorage.removeItem(SUCCESS_SET_NEW_DESTINATION)
     }
   }, [setMainViewState])
 
diff --git a/web/screens/Settings/Advanced/DataFolder/index.tsx b/web/screens/Settings/Advanced/DataFolder/index.tsx
index 9a1863fa27..4b242f2356 100644
--- a/web/screens/Settings/Advanced/DataFolder/index.tsx
+++ b/web/screens/Settings/Advanced/DataFolder/index.tsx
@@ -5,6 +5,8 @@ import { Button, Input } from '@janhq/uikit'
 import { useSetAtom } from 'jotai'
 import { PencilIcon, FolderOpenIcon } from 'lucide-react'
 
+import Loader from '@/containers/Loader'
+
 import { SUCCESS_SET_NEW_DESTINATION } from '@/hooks/useVaultDirectory'
 
 import ModalChangeDirectory, {
@@ -13,10 +15,12 @@ import ModalChangeDirectory, {
 import ModalErrorSetDestGlobal, {
   showChangeFolderErrorAtom,
 } from './ModalErrorSetDestGlobal'
+
 import ModalSameDirectory, { showSamePathModalAtom } from './ModalSameDirectory'
 
 const DataFolder = () => {
   const [janDataFolderPath, setJanDataFolderPath] = useState('')
+  const [showLoader, setShowLoader] = useState(false)
   const setShowDirectoryConfirm = useSetAtom(showDirectoryConfirmModalAtom)
   const setShowSameDirectory = useSetAtom(showSamePathModalAtom)
   const setShowChangeFolderError = useSetAtom(showChangeFolderErrorAtom)
@@ -46,18 +50,20 @@ const DataFolder = () => {
   const onUserConfirmed = useCallback(async () => {
     if (!destinationPath) return
     try {
+      setShowLoader(true)
       const appConfiguration: AppConfiguration =
         await window.core?.api?.getAppConfigurations()
       const currentJanDataFolder = appConfiguration.data_folder
       appConfiguration.data_folder = destinationPath
       await fs.syncFile(currentJanDataFolder, destinationPath)
       await window.core?.api?.updateAppConfiguration(appConfiguration)
-
       console.debug(
         `File sync finished from ${currentJanDataFolder} to ${destinationPath}`
       )
-
       localStorage.setItem(SUCCESS_SET_NEW_DESTINATION, 'true')
+      setTimeout(() => {
+        setShowLoader(false)
+      }, 1200)
       await window.core?.api?.relaunch()
     } catch (e) {
       console.error(`Error: ${e}`)
@@ -107,6 +113,7 @@ const DataFolder = () => {
         onUserConfirmed={onUserConfirmed}
       />
       <ModalErrorSetDestGlobal />
+      {showLoader && <Loader description="Relocating Jan Data Folder..." />}
     </Fragment>
   )
 }
diff --git a/web/screens/Settings/index.tsx b/web/screens/Settings/index.tsx
index ea12ccc203..8f3860ee96 100644
--- a/web/screens/Settings/index.tsx
+++ b/web/screens/Settings/index.tsx
@@ -49,6 +49,7 @@ const SettingsScreen = () => {
   useEffect(() => {
     if (localStorage.getItem(SUCCESS_SET_NEW_DESTINATION) === 'true') {
       setActiveStaticMenu('Advanced Settings')
+      localStorage.removeItem(SUCCESS_SET_NEW_DESTINATION)
     }
   }, [])