@@ -21,8 +21,10 @@ import { NextPageWithLayout } from '#/pages/_app'
 import { DrawerCustom, Loader } from '#/shared'
 import { c, getDeviceType, getOs } from '#/shared/lib/helpers'
 import { useThemeAndDevice } from '#/shared/lib/hooks'
+import { useProgressLoader } from '#/shared/lib/hooks/use-progress-loader'
 import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
 import { SvgIcon } from '#/shared/ui/svg'
+import ProgressLoader from '#/widgets/loaders/progress-loader-props'
 import { AudioMessagesList } from '#/widgets/messages/ui/audio-messages-list'
 import { ModelApiView, StaticTabs } from '#/widgets/model-api-view'
 
@@ -52,6 +54,11 @@ const AudioModelPage: NextPageWithLayout = () => {
 	)
 	const { onCreateImage, onLoadImage, image, setImage } = useImagesUniqInput(version, includeParams, createImage)
 
+	const { progress, isVisible: isProgressVisible } = useProgressLoader({
+		isLoading: createLoading,
+		duration: 150000, // 150 секунд для создания аудио
+	})
+
 	async function onFetch() {
 		const result = await fetchBotParams()
 
@@ -186,6 +193,11 @@ const AudioModelPage: NextPageWithLayout = () => {
 										viewMobileSettings={() => setOpenFiltersMobile(true)}
 									/>
 								)}
+								<Box sx={{ width: '100%', marginTop: '10px' }}>
+									{isProgressVisible && (
+										<ProgressLoader progress={progress} height={15} title='Создание аудио...' showPercentage={true} />
+									)}
+								</Box>
 								{botParams?.blocked && (
 									<div className={styles.blocked}>
 										<BlockedSvg width={16} height={16} color='white' />
@@ -292,6 +304,9 @@ const AudioModelPage: NextPageWithLayout = () => {
 											viewMobileSettings={() => setOpenFiltersMobile(true)}
 										/>
 									)}
+									{isProgressVisible && (
+										<ProgressLoader progress={progress} height={15} title='Создание аудио...' showPercentage={true} />
+									)}
 									{botParams?.blocked && (
 										<div className={styles.blocked}>
 											<BlockedSvg width={21} height={21} color='white' />
@@ -96,17 +96,6 @@ export const AudioMessagesList: React.FC<MessagesList> = memo(({ device, audios
 										width: '100%',
 									}}
 								>
-									{!loadedAudios.has(message.uid) && (
-										<Skeleton
-											sx={{
-												background: theme === 'dark' ? '#2d2d2f' : '#EFF0F2',
-												borderRadius: '8px',
-												width: '100%',
-												height: '48px',
-											}}
-											variant='rectangular'
-										/>
-									)}
 									<AudioPlayer
 										ref={(el) => {
 											audioRefs.current[message.uid] = el as (HTMLAudioElement & AudioPlayerRef) | null
@@ -122,7 +111,6 @@ export const AudioMessagesList: React.FC<MessagesList> = memo(({ device, audios
 										style={{
 											width: '100%',
 											height: '48px',
-											opacity: loadedAudios.has(message.uid) ? 1 : 0,
 										}}
 									>
 										<source src={fileUrl} type='audio/mpeg' />
@@ -130,6 +118,21 @@ export const AudioMessagesList: React.FC<MessagesList> = memo(({ device, audios
 										<source src={fileUrl} type='audio/ogg' />
 										Ваш браузер не поддерживает аудио.
 									</AudioPlayer>
+									{!loadedAudios.has(message.uid) && (
+										<Skeleton
+											sx={{
+												background: theme === 'dark' ? '#2d2d2f' : '#EFF0F2',
+												position: 'absolute',
+												top: '12px',
+												left: '12px',
+												zIndex: 3,
+												borderRadius: '8px',
+												width: 'calc(100% - 24px)',
+												height: '48px',
+											}}
+											variant='rectangular'
+										/>
+									)}
 								</Box>
 								{message.content && message.content.length > 0 && (() => {
 									const cleanContent = message.content.replaceAll('"', '')