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

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>
+    )
+}