From f27a38ca9b24d2bd7640246dd32df0ab206a617c Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Tue, 16 May 2023 19:09:21 +0530
Subject: [PATCH] chore: fix initial loading indicator mobile

---
 .../snjs/lib/Services/Sync/SyncClientInterface.ts    |  2 ++
 .../ContentListView/Header/ContentListHeader.tsx     | 12 ++++++------
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/snjs/lib/Services/Sync/SyncClientInterface.ts b/packages/snjs/lib/Services/Sync/SyncClientInterface.ts
index 7a479cff9..cc5515eae 100644
--- a/packages/snjs/lib/Services/Sync/SyncClientInterface.ts
+++ b/packages/snjs/lib/Services/Sync/SyncClientInterface.ts
@@ -11,4 +11,6 @@ export interface SyncClientInterface {
   getLastSyncDate(): Date | undefined
 
   getSyncStatus(): SyncOpStatus
+
+  completedOnlineDownloadFirstSync: boolean
 }
diff --git a/packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx b/packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx
index 14c0033f8..7a86c92a2 100644
--- a/packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx
@@ -54,13 +54,11 @@ const ContentListHeader = ({
   const isTablet = matchesMd && isTouchScreen
 
   const [syncSubtitle, setSyncSubtitle] = useState('')
-  const [completedInitialSync, setCompletedInitialSync] = useState(false)
   const showSyncSubtitle = isMobileScreen && !!syncSubtitle
 
   useEffect(() => {
     return application.addEventObserver(async (event) => {
       if (event === ApplicationEvent.CompletedInitialSync) {
-        setCompletedInitialSync(true)
         setSyncSubtitle('')
         return
       }
@@ -69,7 +67,9 @@ const ContentListHeader = ({
       const { localDataDone, localDataCurrent, localDataTotal } = syncStatus.getStats()
 
       if (event === ApplicationEvent.SyncStatusChanged) {
-        setSyncSubtitle(syncStatus.syncInProgress && !completedInitialSync ? 'Syncing...' : '')
+        setSyncSubtitle(
+          syncStatus.syncInProgress && !application.sync.completedOnlineDownloadFirstSync ? 'Syncing...' : '',
+        )
         return
       }
 
@@ -83,7 +83,7 @@ const ContentListHeader = ({
         return
       }
     })
-  }, [application, completedInitialSync])
+  }, [application])
 
   const [showDisplayOptionsMenu, setShowDisplayOptionsMenu] = useState(false)
 
@@ -163,8 +163,8 @@ const ContentListHeader = ({
             />
           )}
           <div className="flex min-w-0 flex-grow flex-col break-words">
-            <div className=" text-2xl font-semibold text-text md:text-lg">{panelTitle}</div>
-            {showSyncSubtitle && <div className="text-xs text-passive-0">{syncSubtitle}</div>}
+            <div className="text-2xl font-semibold text-text md:text-lg">{panelTitle}</div>
+            {showSyncSubtitle && <div className="-mt-1 text-xs text-passive-0 md:mt-0">{syncSubtitle}</div>}
             {optionsSubtitle && <div className="text-xs text-passive-0">{optionsSubtitle}</div>}
           </div>
         </div>