diff --git a/packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx b/packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx index 6d81823c8..04392e434 100644 --- a/packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx +++ b/packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx @@ -1,11 +1,11 @@ import { WebApplication } from '@/Application/WebApplication' -import { memo, useCallback, useMemo, useRef, useState } from 'react' +import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react' import Icon from '../../Icon/Icon' import { classNames } from '@standardnotes/utils' import Popover from '@/Components/Popover/Popover' import DisplayOptionsMenu from './DisplayOptionsMenu' import { NavigationMenuButton } from '@/Components/NavigationMenu/NavigationMenu' -import { isTag, VectorIconNameOrEmoji } from '@standardnotes/snjs' +import { ApplicationEvent, isTag, VectorIconNameOrEmoji } from '@standardnotes/snjs' import RoundIconButton from '@/Components/Button/RoundIconButton' import { AnyTag } from '@/Controllers/Navigation/AnyTagType' import { MediaQueryBreakpoints, MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery' @@ -53,6 +53,21 @@ const ContentListHeader = ({ const isTouchScreen = !useMediaQuery(MediaQueryBreakpoints.pointerFine) const isTablet = matchesMd && isTouchScreen + const [isSyncing, setIsSyncing] = useState(false) + const [completedInitialSync, setCompletedInitialSync] = useState(false) + const showSyncSubtitle = isMobileScreen && isSyncing && !completedInitialSync + + useEffect(() => { + return application.addEventObserver(async (event) => { + if (event === ApplicationEvent.SyncStatusChanged) { + setIsSyncing(application.sync.getSyncStatus().syncInProgress) + } else if (event === ApplicationEvent.CompletedInitialSync) { + setIsSyncing(false) + setCompletedInitialSync(true) + } + }) + }, [application, completedInitialSync]) + const [showDisplayOptionsMenu, setShowDisplayOptionsMenu] = useState(false) const toggleDisplayOptionsMenu = useCallback(() => { @@ -114,31 +129,38 @@ const ContentListHeader = ({ const FolderName = useMemo(() => { return (