added dynamic routes

src/containers/main/Header/index.tsx

@@ -21,7 +21,7 @@ import { useUpdates } from '~/hooks/updates/useUpdates';
 
 import styles from './styles.module.scss';
 
-type HeaderProps = {};
+export interface HeaderProps {}
 
 const Header: FC<HeaderProps> = observer(() => {
   const labStats = useGetLabStats();

src/containers/main/Header/ssr.tsx

@@ -0,0 +1,12 @@
+import dynamic from 'next/dynamic';
+
+import type { HeaderProps } from '~/containers/main/Header/index';
+
+import styles from './styles.module.scss';
+
+export const HeaderSSR = dynamic<HeaderProps>(() => import('./index').then(it => it.Header), {
+  ssr: false,
+  loading: () => <div className={styles.wrap} />,
+});
+
+export const HeaderSSRPlaceholder = () => <div className={styles.wrap} />;

src/containers/main/Header/styles.module.scss

@@ -1,5 +1,16 @@
 @import "../../../styles/variables";
 
+@keyframes appear {
+  from {
+    opacity: 0;
+    transform: translate(0, -$header_height);
+  }
+  to {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+}
+
 .wrap {
   height: $header_height;
   z-index: 25;
@@ -10,7 +21,8 @@
   align-items: stretch;
   justify-content: center;
   box-sizing: border-box;
-  transition: background-color 0.5s;
+  transition: background-color 0.75s;
+  animation: appear 500ms forwards;
 
   @include desktop {
     height: 64px;

src/containers/main/SidebarRouter/index.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 
-import { SubmitBar } from '~/components/bars/SubmitBar';
+import { SubmitBarSSR } from '~/components/bars/SubmitBar/ssr';
 import { Authorized } from '~/components/containers/Authorized';
 
 interface IProps {
@@ -10,7 +10,7 @@ interface IProps {
 
 const SidebarRouter: FC<IProps> = ({ isLab }) => (
   <Authorized>
-    <SubmitBar isLab={isLab} />
+    <SubmitBarSSR isLab={isLab} />
   </Authorized>
 );