Changes

resources/js/Components/BuilderUi/Pages/PageTabBuilder.vue

@@ -1,45 +1,78 @@
 <template>
+	<div>
+		<PageSkeleton v-if="loading" />
+		<div class="space-y-6" v-else>
 			<component
 					v-for="(block, index) in blocks"
 					:key="index"
 					:is="getComponent(block.type)"
 					:block="block"
 			/>
+		</div>
+	</div>
 </template>
 
 <script>
-import {Link} from "@inertiajs/vue3";
+import { defineAsyncComponent } from 'vue';
-import slugify from "slugify";
+
-import HeadingBlock from "@/Components/BuilderUi/Pages/Blocks/HeadingBlock.vue";
+import PageSkeleton from "@/Components/BuilderUi/Pages/PageSkeleton.vue";
-import ParagraphBlock from "@/Components/BuilderUi/Pages/Blocks/ParagraphBlock.vue";
-import ClientImageSlider from "@/Components/ClientImageSlider.vue";
-import ImageBlock from "@/Components/BuilderUi/Pages/Blocks/ImageBlock.vue";
-import FileBlock from "@/Components/BuilderUi/Pages/Blocks/FileBlock.vue";
-import PersonBlock from "@/Components/BuilderUi/Pages/Blocks/PersonBlock.vue";
-import StepperBlock from "@/Components/BuilderUi/Pages/Blocks/StepperBlock.vue";
-import VideoBlock from "@/Components/BuilderUi/Pages/Blocks/VideoBlock.vue";
-import PostListBlock from "@/Components/BuilderUi/Pages/Blocks/PostListBlock.vue";
 
 export default {
 	name: "PageTabBuilder",
-	components: {FileBlock, ImageBlock, ClientImageSlider, ParagraphBlock, HeadingBlock, Link, PersonBlock, StepperBlock, VideoBlock, PostListBlock},
+	components: {PageSkeleton},
+	data() {
+		return {
+			loading: true, // Флаг загрузки
+		};
+	},
 	methods: {
+		async loadAllComponents() {
+			const componentMap = {
+				heading: () => import('@/Components/BuilderUi/Pages/Blocks/HeadingBlock.vue'),
+				paragraph: () => import('@/Components/BuilderUi/Pages/Blocks/ParagraphBlock.vue'),
+				images: () => import('@/Components/ClientImageSlider.vue'),
+				image: () => import('@/Components/BuilderUi/Pages/Blocks/ImageBlock.vue'),
+				files: () => import('@/Components/BuilderUi/Pages/Blocks/FileBlock.vue'),
+				person: () => import('@/Components/BuilderUi/Pages/Blocks/PersonBlock.vue'),
+				stepper: () => import('@/Components/BuilderUi/Pages/Blocks/StepperBlock.vue'),
+				video: () => import('@/Components/BuilderUi/Pages/Blocks/VideoBlock.vue'),
+				postsList: () => import('@/Components/BuilderUi/Pages/Blocks/PostListBlock.vue'),
+				postItem: () => import('@/Components/BuilderUi/Pages/Blocks/PostItemBlock.vue'),
+				pageItem: () => import('@/Components/BuilderUi/Pages/Blocks/PageItemBlock.vue'),
+				customForm: () => import('@/Components/BuilderUi/Pages/Blocks/FormBlock.vue'),
+				pageResourceList: () => import('@/Components/BuilderUi/Pages/Blocks/PageResourceList.vue'),
+			};
+
+			// Создайте массив промисов для загрузки всех компонентов
+			const promises = Object.values(componentMap).map(load => load());
+
+			// Дождитесь завершения всех загрузок
+			await Promise.all(promises);
+			this.loading = false; // Установите флаг загрузки в false
+		},
 		getComponent(type) {
 			const componentMap = {
-				heading: 'HeadingBlock',
+				heading: () => import('@/Components/BuilderUi/Pages/Blocks/HeadingBlock.vue'),
-				paragraph: 'ParagraphBlock',
+				paragraph: () => import('@/Components/BuilderUi/Pages/Blocks/ParagraphBlock.vue'),
-				images: 'ClientImageSlider',
+				images: () => import('@/Components/ClientImageSlider.vue'),
-				image: 'ImageBlock',
+				image: () => import('@/Components/BuilderUi/Pages/Blocks/ImageBlock.vue'),
-				files: 'FileBlock',
+				files: () => import('@/Components/BuilderUi/Pages/Blocks/FileBlock.vue'),
-				person: 'PersonBlock',
+				person: () => import('@/Components/BuilderUi/Pages/Blocks/PersonBlock.vue'),
-				stepper: 'StepperBlock',
+				stepper: () => import('@/Components/BuilderUi/Pages/Blocks/StepperBlock.vue'),
-				video: 'VideoBlock',
+				video: () => import('@/Components/BuilderUi/Pages/Blocks/VideoBlock.vue'),
-				postsList: 'PostListBlock',
+				postsList: () => import('@/Components/BuilderUi/Pages/Blocks/PostListBlock.vue'),
-
+				postItem: () => import('@/Components/BuilderUi/Pages/Blocks/PostItemBlock.vue'),
+				pageItem: () => import('@/Components/BuilderUi/Pages/Blocks/PageItemBlock.vue'),
+				customForm: () => import('@/Components/BuilderUi/Pages/Blocks/FormBlock.vue'),
+				pageResourceList: () => import('@/Components/BuilderUi/Pages/Blocks/PageResourceList.vue'),
 			};
-			return componentMap[type] || null;
+			return defineAsyncComponent(componentMap[type] || null);
 		},
 	},
+	async created() {
+		await this.loadAllComponents(); // Загрузить все компоненты при создании
+	},
+
 
 	props: {
 		blocks: {

resources/js/Components/ClientMainSlider.vue

@@ -39,7 +39,7 @@
 							</svg>
 						</button>
 
-						<div class="flex space-x-3 w-[100px] items-center font-semibold text-xl">
+						<div class="flex space-x-3 w-[100px] items-center font-semibold text-xl text-white">
 							<span>{{ currentIndex + 1 }}</span>
 							<div class="flex w-full h-1 bg-gray-200 rounded-full overflow-hidden dark:bg-neutral-700" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
 								<div class="flex flex-col justify-center rounded-full overflow-hidden bg-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500 my-slider-progress-bar" :style="{ 'width': `${percentage}%` }"></div>