@@ -19,7 +19,7 @@ export function useImageBotPagination(deviceType: Device) {
 
 	const [messages, setMessages] = useState<Message[]>([])
 
-	const [loading, setLoading] = useState<boolean>(false)
+	const [loading, setLoading] = useState<boolean>(true)
 
 	const { showError } = useShowData()
 
@@ -53,19 +53,16 @@ export function useImageBotPagination(deviceType: Device) {
 			offset.current,
 			count || 10
 		)
-		setLoading(false)
 
 		if (response.status >= 400 || !Array.isArray(answer))
 			return showError('Ошибка загрузки чата')
 
 		if (deviceType === 'desktop') {
 			setMessages((prev) => [...prev, ...answer])
-			offset.current = offset.current + answer.length
 			return
 		}
 
 		setMessages((prev) => [...answer.reverse(), ...prev])
-		offset.current = offset.current + answer.length
 	}
 
 	const callback = async function (entries: IntersectionObserverEntry[]) {
@@ -79,19 +76,30 @@ export function useImageBotPagination(deviceType: Device) {
 			fetchMessages(active?.firstLimit)
 		}
 
-		if (!mobileScrollContainer.current) return
+		const { current } = mobileScrollContainer
 
-		const scrollBottom =
-			mobileScrollContainer.current.scrollHeight - mobileScrollContainer.current.scrollTop
+		if (!current) return
+
+		const scrollBottom = current.scrollHeight - current.scrollTop
 
 		await fetchMessages()
 
 		setTimeout(() => {
-			if (!mobileScrollContainer.current) return
-			mobileScrollContainer.current!.scroll({
-				top: mobileScrollContainer.current!.scrollHeight - scrollBottom,
-				behavior: 'smooth',
-			})
+			const { current } = mobileScrollContainer
+
+			if (!current) return
+
+			if (offset.current === 0) current.scrollTop = current.scrollHeight - scrollBottom
+			else {
+				current.scroll({
+					top: current.scrollHeight - scrollBottom,
+					behavior: 'smooth',
+				})
+			}
+
+			offset.current = offset.current + 10
+
+			setLoading(false)
 		}, 500)
 	}
 
@@ -113,6 +121,7 @@ export function useImageBotPagination(deviceType: Device) {
 		messages,
 		loading,
 		setLoading,
+		offset,
 		setMessages,
 		fetchMessages,
 		mobileScrollContainer,
@@ -0,0 +1,17 @@
+.container {
+	width: 100%;
+	border-radius: 15px;
+	height: 100%;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	background-color: var(--new-ui-main-color);
+	opacity: 0;
+	z-index: -1;
+	transition: all 0.3s ease-in-out;
+
+	&_active {
+		opacity: 1;
+		z-index: 100;
+	}
+}
@@ -8,7 +8,7 @@ import { useImagesBotFilters } from '@/src/features/image-bot-filters'
 import { useImagesUniqInput } from '@/src/features/image-bot-input'
 import { useImageBotPagination } from '@/src/features/image-bot-pagination'
 import Title from '@/src/features/title/title'
-import { useShowData, DrawerCustom, Error } from '@/src/shared'
+import { useShowData, DrawerCustom, Error, Loader } from '@/src/shared'
 import { useThemeAndDevice } from '@/src/shared/lib/hooks'
 import { ArrowDownScroll } from '@/src/shared/ui/icon-components/scroll-down-arrow'
 import { useImagesPagination, ImageMessagesList } from '@/src/widgets/messages'
@@ -18,9 +18,11 @@ import { useSession } from 'next-auth/react'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
-import { getDeviceType, getOs } from '@/src/shared/lib/helpers'
+import { c, getDeviceType, getOs } from '@/src/shared/lib/helpers'
 import { Device, DeviceOs } from '@/src/shared/lib/types/entities'
 
+import styles from './image-model.module.scss'
+
 export interface ImageModelPageProps {
 	deviceType: Device
 	deviceOs: DeviceOs
@@ -58,6 +60,7 @@ const ImageModelPage = ({ deviceType, deviceOs }: ImageModelPageProps) => {
 		setMessages,
 		fetchMessages,
 		loading,
+		offset,
 		messages,
 	} = useImageBotPagination(deviceType)
 
@@ -79,10 +82,6 @@ const ImageModelPage = ({ deviceType, deviceOs }: ImageModelPageProps) => {
 		await Promise.all([fetchBotParams()])
 	}
 
-	useEffect(() => {
-		console.log(createLoading)
-	}, [createLoading])
-
 	useEffect(() => {
 		onFetch()
 		onObserverMounted()
@@ -139,10 +138,13 @@ const ImageModelPage = ({ deviceType, deviceOs }: ImageModelPageProps) => {
 							</Stack>
 							<Box
 								className={'bg-color-block border-radius-main'}
-								sx={{ padding: '30px', position: 'relative' }}
+								sx={{
+									padding: '30px',
+									position: 'relative',
+								}}
 							>
 								<ImageMessagesList
-									isComplete={isComplete}
+									isComplete={loading}
 									device={deviceType}
 									images={messages}
 									getMessagesPagination={fetchMessages}
@@ -160,7 +162,30 @@ const ImageModelPage = ({ deviceType, deviceOs }: ImageModelPageProps) => {
 							</Box>
 						</>
 					) : (
-						<Box className={'bg-color-block border-radius-main'}>
+						<Box
+							className={'bg-color-block border-radius-main'}
+							sx={{ position: 'relative' }}
+						>
+							<div
+								className={c(
+									styles.container,
+									loading &&
+										offset.current === 0 &&
+										styles.container_active
+								)}
+							>
+								<div
+									style={{
+										position: 'absolute',
+										top: '50%',
+										left: '50%',
+										transform: 'translate(-50%, -50%)',
+									}}
+								>
+									<Loader />
+								</div>
+							</div>
+
 							<Box
 								sx={{
 									padding: '30px',
@@ -177,7 +202,7 @@ const ImageModelPage = ({ deviceType, deviceOs }: ImageModelPageProps) => {
 									ref={refScrollMobile}
 								></div>
 								<ImageMessagesList
-									isComplete={isComplete}
+									isComplete={loading}
 									device={deviceType}
 									images={messages}
 									getMessagesPagination={fetchMessages}
@@ -6,7 +6,7 @@ import Link from 'next/link'
 
 import FullScreenModal from '@/src/features/image-modal/full-screen-modal'
 import { useAppSelector } from '@/src/main/store/store'
-import { Success, TooltipCustom, useShowData } from '@/src/shared'
+import { Loader, Success, TooltipCustom, useShowData } from '@/src/shared'
 import { useAutoScroll } from '@/src/shared/lib/hooks'
 
 import styles from './image-messages-list.module.scss'
@@ -15,7 +15,7 @@ import { useMessages } from '../model/use-messages'
 import { Message } from '@/src/entities/message'
 import { ImageIcons } from './image-icons'
 
-interface MessagesList {
+interface MessagesList extends React.HTMLAttributes<HTMLDivElement> {
 	device: 'mobile' | 'desktop'
 	images: Message[]
 	getMessagesPagination?: () => Promise<void>
@@ -23,7 +23,7 @@ interface MessagesList {
 }
 
 export const ImageMessagesList: React.FC<MessagesList> = memo(
-	({ device, images, getMessagesPagination }) => {
+	({ device, images, isComplete, ...props }) => {
 		const { error, showError, isError } = useShowData()
 		const [modal, setModal] = useState<boolean>(false)
 		const theme = useAppSelector((state) => state.theme.theme)
@@ -35,7 +35,7 @@ export const ImageMessagesList: React.FC<MessagesList> = memo(
 			<>
 				<FullScreenModal modal={modal} setModal={setModal} image={chosenImage} />
 				<Success message={error} open={Boolean(error)} isError={isError} />
-				<Box className={'mt-15'}>
+				<Box {...props} className={'mt-15'}>
 					<Typography
 						sx={{
 							paddingBottom: '30px',
@@ -48,6 +48,18 @@ export const ImageMessagesList: React.FC<MessagesList> = memo(
 						ГЕНЕРАЦИИ
 					</Typography>
 
+            {/* {isComplete && (
+              <div
+                style={{
+                  margin: '0 auto',
+                  paddingBottom: '20px',
+                  width: 'max-content',
+                }}
+              >
+                <Loader />
+              </div>
+            )} */}
+
 					<Box
 						id={'messages-list'}
 						sx={{