@@ -490,3 +490,21 @@ button {
 	opacity: 0;
 	transition: opacity 400ms;
 }
+
+
+.fade-enter{
+   opacity: 0;
+}
+.fade-exit{
+   opacity: 1;
+}
+.fade-enter-active{
+   opacity: 1;
+}
+.fade-exit-active{
+   opacity: 0;
+}
+.fade-enter-active,
+.fade-exit-active{
+   transition: opacity 500ms;
+}
\ No newline at end of file
@@ -0,0 +1,33 @@
+.loading {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100dvh;
+
+	&__loader {
+		margin-bottom: 20px;
+	}
+
+	&__box {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		max-width: 300px;
+
+		p {
+			font-weight: 600;
+			font-size: 26px;
+			color: var(--air-color);
+      letter-spacing: 0.06rem;
+      margin-bottom: 5px;
+		}
+
+		span {
+			font-weight: 500;
+			text-align: center;
+			font-size: 14px;
+			color: var(--new-ui-gray-color);
+			margin-bottom: 20px;
+		}
+	}
+}
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { Box } from '@mui/material'
 import { ThemeProvider } from '@mui/material/styles'
 import Head from 'next/head'
@@ -24,8 +24,9 @@ import { change } from '#/features/pending'
 import { ChangePasswordPlate } from '#/features/change-password-corp'
 import { ResendInvationPlate } from '#/features/resend-invation-corp '
 import { ErrorReportPlate } from '#/features/error-report'
-
-const freeRoutes = ['/login', '/register', '/reset', '/change-password']
+import { CSSTransition, SwitchTransition } from 'react-transition-group'
+import { CommonButton } from '#/shared/ui/button'
+import styles from './default.module.scss'
 
 export const Layout: React.FC<LayoutProps> = ({ children, titlePage, title = titlePage, isLoader, device = getDeviceType() }) => {
 	const { data: sessionData } = useSession()
@@ -105,11 +106,51 @@ export const Layout: React.FC<LayoutProps> = ({ children, titlePage, title = tit
 		}
 	}, [appState.settings.state])
 
+	const [requestDelay, setRequestDelay] = useState(false)
+
+	const transitionRef = useRef(null)
+
+	useEffect(() => {
+		setTimeout(() => {
+			setRequestDelay(true)
+
+			if (!sessionData) return Sentry.captureMessage(`long time loading - session not defined`)
+
+			const { user } = sessionData
+
+			Sentry.captureMessage(`long time loading 
+        - ${user ? user.email : 'unknown email'}
+         - ${new Date().toDateString()} 
+         - ${JSON.stringify(sessionData)}`)
+		}, 5000)
+	}, [])
+
 	if (userLoading || isLoader || status === 'loading') {
 		return (
-			<Box width='100vw' height='100vh' display='flex' alignItems='center' justifyContent='center'>
-				<Loader size={50} />
-			</Box>
+			<SwitchTransition>
+				<CSSTransition
+					nodeRef={transitionRef}
+					key={requestDelay ? 'button' : 'loader'}
+					timeout={400}
+					classNames='my-node'
+					in={requestDelay}
+				>
+					<div ref={transitionRef} className={styles.loading}>
+						{requestDelay ? (
+							<div className={styles.loading__box}>
+								<Loader className={styles.loading__loader} size={50} />
+								<p>Долгая загрузка</p>
+								<span>возможно нужно перезайти</span>
+								<CommonButton onClick={logout} variant='primary'>
+									Выйти
+								</CommonButton>
+							</div>
+						) : (
+							<Loader size={50} />
+						)}
+					</div>
+				</CSSTransition>
+			</SwitchTransition>
 		)
 	}