web: show sync status in place of placeholder

apps/web/src/components/placeholders/index.tsx

@@ -19,13 +19,50 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { Button, Flex, Text } from "@theme-ui/components";
 import { Context, useTip } from "../../hooks/use-tip";
-import { Info } from "../icons";
+import { Info, Sync } from "../icons";
+import { useStore as useAppStore } from "../../stores/app-store";
+import { toTitleCase } from "@notesnook/common";
 
 type PlaceholderProps = { context: Context; text?: string };
 function Placeholder(props: PlaceholderProps) {
   const { context, text } = props;
   const tip = useTip(context);
+  const syncStatus = useAppStore((store) => store.syncStatus);
 
+  if (syncStatus.key === "syncing" && context === "notes") {
+    return (
+      <Flex
+        variant="columnCenter"
+        sx={{
+          position: "relative",
+          justifyContent: "flex-start",
+          alignItems: "flex-start",
+          alignSelf: "stretch",
+          px: 6
+        }}
+      >
+        <Flex
+          sx={{
+            border: "1px solid var(--accent)",
+            alignItems: "center",
+            borderRadius: 50,
+            p: 1,
+            py: "1.5px"
+          }}
+        >
+          <Sync color="accent" size={12} sx={{ mr: "small" }} />
+          <Text variant="subBody" sx={{ fontSize: 10 }} color="accent">
+            Syncing your {context}
+          </Text>
+        </Flex>
+
+        <Text variant="subBody" sx={{ fontSize: "body", mt: 1 }}>
+          {toTitleCase(syncStatus.type || "syncing")}ing {syncStatus.progress}{" "}
+          items
+        </Text>
+      </Flex>
+    );
+  }
   if (!tip) return null;
 
   return (

apps/web/src/components/status-bar/index.tsx

@@ -43,6 +43,7 @@ import {
 import useStatus from "../../hooks/use-status";
 import { ScopedThemeProvider } from "../theme-provider";
 import { checkForUpdate, installUpdate } from "../../utils/updater";
+import { toTitleCase } from "@notesnook/common";
 
 function StatusBar() {
   const user = useUserStore((state) => state.user);
@@ -230,9 +231,7 @@ function SyncStatus() {
       title={status.tooltip}
       data-test-id={`sync-status-${status.key}`}
     >
-      {syncStatus.progress ? (
+      {!syncStatus.progress && (
-        <Text variant={"subBody"}>{syncStatus.progress}</Text>
-      ) : (
         <status.icon
           size={12}
           rotate={status.loading}
@@ -253,6 +252,9 @@ function SyncStatus() {
           </>
         ) : null}
       </Text>
+      {syncStatus.progress && (
+        <Text variant={"subBody"}>{syncStatus.progress}</Text>
+      )}
     </Button>
   );
 }
@@ -309,7 +311,7 @@ const syncStatusFilters: SyncStatusFilter[] = [
     isActive: (syncStatus) => syncStatus === "syncing",
     icon: Sync,
     loading: true,
-    text: ({ type }) => <>{type || "sync"}ing</>,
+    text: ({ type }) => <>{toTitleCase(type || "sync")}ing</>,
     tooltip: "Syncing your notes..."
   },
   {

apps/web/src/stores/app-store.js

@@ -104,10 +104,10 @@ class AppStore extends BaseStore {
 
     db.eventManager.subscribe(
       EVENTS.databaseSyncRequested,
-      async (full, force) => {
+      async (full, force, lastSynced) => {
         if (!this.get().isAutoSyncEnabled) return;
 
-        await this.get().sync(full, force);
+        await this.get().sync(full, force, lastSynced);
       }
     );
 
@@ -273,7 +273,7 @@ class AppStore extends BaseStore {
     this.set((state) => (state.lastSynced = lastSynced));
   };
 
-  sync = async (full = true, force = false) => {
+  sync = async (full = true, force = false, lastSynced = null) => {
     if (
       this.isSyncing() ||
       !this.get().isSyncEnabled ||
@@ -287,7 +287,7 @@ class AppStore extends BaseStore {
 
     this.updateSyncStatus("syncing");
     try {
-      const result = await db.sync(full, force);
+      const result = await db.sync(full, force, lastSynced);
 
       if (!result) return this.updateSyncStatus("failed");
       this.updateSyncStatus("completed", true);