Промежуточный этап синхронизации

app/components/ChatHeader/ChatHeader.tsx

@@ -31,7 +31,7 @@ export function ChatHeader() {
     const theme = useMantineTheme(); 
     const [blocked, blockUser, unblockUser] = useBlacklist(dialog);
     const [opponent, ___, forceUpdateUserInformation] = useUserInformation(dialog);
-    const protocolState = useProtocolState();
+    const [protocolState] = useProtocolState();
     const [userTypeing, setUserTypeing] = useState(false);
     const timeoutRef = useRef<NodeJS.Timeout>(undefined);
     const avatars = useAvatars(dialog);

app/components/DialogHeaderText/DialogHeaderText.tsx

@@ -0,0 +1,39 @@
+import { useRosettaColors } from "@/app/hooks/useRosettaColors";
+import { ProtocolState } from "@/app/providers/ProtocolProvider/ProtocolProvider";
+import { useProtocolState } from "@/app/providers/ProtocolProvider/useProtocolState";
+import { Flex, Loader, Text } from "@mantine/core";
+
+export function DialogHeaderText() {
+    const [protocolState] = useProtocolState();
+    const colors = useRosettaColors();
+
+    const headerType = () => {
+        switch(protocolState){
+            case ProtocolState.SYNCHRONIZATION:
+                return (<>
+                    <Loader size={12} color={colors.chevrons.active}></Loader>
+                    <Text fw={500} style={{
+                        userSelect: 'none'
+                    }} size={'sm'}>Updating...</Text>
+                </>);
+            case ProtocolState.CONNECTED:
+                return (<>
+                    <Text fw={500} style={{
+                        userSelect: 'none'
+                    }} size={'sm'}>Chats</Text>
+                </>);
+            default:
+                return (<>
+                    <Text fw={500} style={{
+                        userSelect: 'none'
+                    }} size={'sm'}>Chats</Text>
+                </>);
+        }
+    }
+
+    return (
+        <Flex direction={'row'} align={'center'} gap={'xs'}>
+            {headerType()}
+        </Flex>
+    )
+}

app/components/DialogsPanelHeader/DialogsPanelHeader.tsx

@@ -6,6 +6,7 @@ import { useLogout } from "@/app/providers/AccountProvider/useLogout";
 import { useHotkeys } from "@mantine/hooks";
 import { useNavigate } from "react-router-dom";
 import { usePublicKey } from "@/app/providers/AccountProvider/usePublicKey";
+import { DialogHeaderText } from "../DialogHeaderText/DialogHeaderText";
 
 export function DialogsPanelHeader() {
     const colors = useRosettaColors();
@@ -66,9 +67,7 @@ export function DialogsPanelHeader() {
                         </Menu.Item>
                     </Menu.Dropdown>
                 </Menu>
-                <Text fw={500} style={{
-                    userSelect: 'none'
-                }} size={'sm'}>Chats</Text>
+                <DialogHeaderText></DialogHeaderText>
                 <Menu withArrow width={150} shadow="md">
                     <Menu.Target>
                         <IconEdit style={{

app/components/GroupHeader/GroupHeader.tsx

@@ -25,7 +25,7 @@ export function GroupHeader() {
     const {deleteMessages, dialog} = useDialog();
     const theme = useMantineTheme(); 
     const {groupInfo} = useGroupInformation(dialog);
-    const protocolState = useProtocolState();
+    const [protocolState] = useProtocolState();
     const [usersTypeing, setUsersTypeing] = useState<{
         timeout: NodeJS.Timeout | null,
         fromPublicKey: string

app/components/Topbar/Topbar.tsx

@@ -8,7 +8,7 @@ import { MacFrameButtons } from "../MacFrameButtons/MacFrameButtons";
 
 export function Topbar() {
     const colors = useRosettaColors();
-    const protocolState = useProtocolState(); 
+    const [protocolState] = useProtocolState(); 
 
 
     return (
@@ -16,14 +16,14 @@ export function Topbar() {
             {window.platform == 'win32' && <WindowsFrameButtons></WindowsFrameButtons>}
             {window.platform == 'darwin' && <MacFrameButtons></MacFrameButtons>}
             {window.platform == 'linux' && <WindowsFrameButtons></WindowsFrameButtons>}
-            {(protocolState == ProtocolState.CONNECTED || !window.location.hash.includes("main")) && 
+            {(protocolState == ProtocolState.CONNECTED || protocolState == ProtocolState.SYNCHRONIZATION || !window.location.hash.includes("main")) && 
                 <Flex align={'center'} justify={'center'}>
                     <Text fw={'bolder'} fz={13} c={'gray'}>
                         Rosetta Messenger
                     </Text>
                 </Flex>
             }
-            {(protocolState != ProtocolState.CONNECTED && protocolState != ProtocolState.DEVICE_VERIFICATION_REQUIRED && window.location.hash.includes("main")) && 
+            {(protocolState != ProtocolState.CONNECTED && protocolState != ProtocolState.SYNCHRONIZATION && protocolState != ProtocolState.DEVICE_VERIFICATION_REQUIRED && window.location.hash.includes("main")) && 
                 <Flex align={'center'} gap={5} justify={'center'}>
                     <Loader size={12} color={colors.chevrons.active}></Loader>
                     <Text fw={'bolder'} fz={13} c={'gray'}>