@myissue/vue-website-page-builder 3.3.85 → 3.3.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "3.3.85",
+  "version": "3.3.87",
   "description": "Vue 3 page builder component with drag & drop functionality.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",

package/src/Components/Modals/BuilderComponents.vue

@@ -44,25 +44,10 @@ const firstButtonBuilder = function () {
         <div v-if="CustomBuilderComponents">
           <component :is="CustomBuilderComponents" />
         </div>
-        <div class="pbx-h-[75vh]" v-else>
+        <div v-else>
           <DefaultBuilderComponents :customMediaComponent="customMediaComponent" />
         </div>
       </div>
     </div>
-    <div
-      class="pbx-border-0 pbx-py-4 pbx-flex sm:pbx-justify-end pbx-justify-center pbx-border-solid pbx-border-t pbx-border-gray-200 pbx-mt-4"
-    >
-      <div class="sm:pbx-w-3/6 pbx-w-full pbx-px-2 pbx-my-2 pbx-flex pbx-gap-2 pbx-justify-end">
-        <button
-          v-if="firstButtonText"
-          ref="firstButtonRef"
-          class="pbx-mySecondaryButton"
-          type="button"
-          @click="firstButtonBuilder"
-        >
-          {{ firstButtonText }}
-        </button>
-      </div>
-    </div>
   </ModalBuilder>
 </template>

package/src/Components/Modals/ModalBuilder.vue

@@ -72,7 +72,7 @@ const maxWidthClass = computed(() => {
         ></div>
 
         <div
-          class="pbx-relative pbx-inline-block pbx-bg-white pbx-rounded-xl pbx-text-left pbx-overflow-hidden pbx-shadow-xl pbx-transform pbx-transition-all pbx-max-w-[96vh] lg:pbx-max-h-[98vh] pbx-max-h-[85vh] pbx-overflow-y-auto pbx-w-full"
+          class="pbx-relative pbx-inline-block pbx-bg-white pbx-rounded-xl pbx-text-left pbx-overflow-hidden pbx-shadow-xl pbx-transform pbx-transition-all pbx-max-w-[96vh] lg:pbx-max-h-[98vh] pbx-max-h-[85vh] pbx-overflow-y-scroll pbx-w-full"
           :class="[
             maxWidthClass ? maxWidthClass : '',
             minHeight ? minHeight : '',

package/src/PageBuilder/PageBuilder.vue

@@ -61,8 +61,8 @@ const emit = defineEmits(['handleClosePageBuilder', 'handlePublishPageBuilder'])
 const closePageBuilder = function () {
   emit('handleClosePageBuilder')
 }
-const closePublish = function () {
-  pageBuilderService.handleManualSave()
+const closePublish = async function () {
+  await pageBuilderService.handleManualSave()
   emit('handlePublishPageBuilder')
 }
 
@@ -93,10 +93,6 @@ watch(languageSelction, async (newVal) => {
   }
 })
 
-const getCurrentLanguage = computed(() => {
-  return pageBuilderStateStore.getCurrentLanguage
-})
-
 const getBuilderStarted = computed(() => {
   return pageBuilderStateStore.getBuilderStarted
 })
@@ -434,7 +430,7 @@ onMounted(async () => {
 
 <template>
   <div
-    class="pbx-flex pbx-flex-col pbx-font-sans pbx-text-black pbx-max-w-full pbx-border-solid pbx-border pbx-border-gray-400 pbx-inset-x-0 pbx-z-10 pbx-bg-white pbx-overflow-x-auto pbx-h-full"
+    class="lg:pbx-min-w-full lg:pbx-max-w-full lg:pbx-w-full pbx-mx-auto pbx-flex pbx-flex-col pbx-font-sans pbx-text-black pbx-border-solid pbx-border pbx-border-gray-400 pbx-inset-x-0 pbx-z-10 pbx-bg-white pbx-overflow-x-auto pbx-h-full"
   >
     <GlobalLoader
       v-if="(getIsLoadingGlobal && !openAppNotStartedModal) || isLoadingLang"
@@ -516,7 +512,7 @@ onMounted(async () => {
 
     <div
       id="pagebuilder-navbar"
-      class="pbx-w-full pbx-bg-myPrimaryLightGrayColor pbx-flex pbx-items-center pbx-justify-between pbx-border-0 pbx-border-solid pbx-border-b pbx-border-gray-200 pbx-mb-2 lg:pbx-px-6 pbx-px-4 pbx-font-sans pbx-min-h-20"
+      class="lg:pbx-min-w-full lg:pbx-max-w-full lg:pbx-w-full pbx-min-w-[96rem] pbx-max-w-[96rem] pbx-w-[96rem] pbx-flex-1 pbx-bg-myPrimaryLightGrayColor pbx-flex pbx-items-center pbx-justify-between pbx-border-0 pbx-border-solid pbx-border-b pbx-border-gray-200 pbx-mb-2 lg:pbx-px-6 pbx-px-4 pbx-font-sans pbx-min-h-20"
     >
       <template
         v-if="
@@ -532,7 +528,7 @@ onMounted(async () => {
               await pageBuilderService.clearHtmlSelection()
             }
           "
-          class="xl:pbx-flex pbx-hidden pbx-justify-start pbx-py-2"
+          class="pbx-flex pbx-justify-start pbx-py-2"
         >
           <img class="pbx-h-6" :src="getPageBuilderConfig.pageBuilderLogo.src" alt="Logo" />
         </div>
@@ -704,7 +700,7 @@ onMounted(async () => {
             >
               <div class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2">
                 <span
-                  class="pbx-h-10 pbx-w-10 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0 pbx-text-black hover:pbx-text-white"
+                  class="pbx-h-10 pbx-w-10 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-myPrimaryLinkColor focus-visible:pbx-ring-0 pbx-text-black hover:pbx-text-white"
                 >
                   <span class="material-symbols-outlined"> phone_iphone </span>
                 </span>
@@ -783,14 +779,15 @@ onMounted(async () => {
                     getPageBuilderConfig.userSettings.language.enable.length >= 1
                   "
                 >
-                  <div
+                  <option
                     v-for="lang in pageBuilderService
                       .availableLanguage()
                       .filter((l) => getPageBuilderConfig.userSettings.language.enable.includes(l))"
                     :key="lang"
+                    :value="lang"
                   >
-                    <option :value="lang">{{ lang }}</option>
-                  </div>
+                    {{ lang }}
+                  </option>
                 </template>
                 <template
                   v-if="
@@ -799,9 +796,13 @@ onMounted(async () => {
                       getPageBuilderConfig.userSettings.language.enable.length === 0)
                   "
                 >
-                  <div v-for="lang in pageBuilderService.availableLanguage()" :key="lang">
-                    <option :value="lang">{{ lang }}</option>
-                  </div>
+                  <option
+                    v-for="lang in pageBuilderService.availableLanguage()"
+                    :key="lang"
+                    :value="lang"
+                  >
+                    {{ lang }}
+                  </option>
                 </template>
               </select>
             </div>
@@ -824,10 +825,14 @@ onMounted(async () => {
         </template>
       </div>
     </div>
-
     <!-- Top Layout Save And Reset Area - End -->
-    <div id="pagebuilder-main" class="pbx-relative pbx-h-full pbx-flex pbx-pb-2 pbx-gap-2">
-      <!-- Left menu -->
+
+    <!-- Page Builder Main Start -->
+    <div
+      id="pagebuilder-main"
+      class="lg:pbx-min-w-full lg:pbx-max-w-full lg:pbx-w-full pbx-min-w-[96rem] pbx-max-w-[96rem] pbx-w-[96rem] pbx-flex-1 pbx-relative pbx-h-full pbx-flex pbx-pb-2 pbx-gap-2"
+    >
+      <!-- Left Menu Start -->
       <div
         @click.self="
           async () => {
@@ -835,7 +840,7 @@ onMounted(async () => {
           }
         "
         id="pagebuilder-left-menu"
-        class="pbx-w-14 pbx-pt-7 pbx-pb-2 pbx-bg-myPrimaryLightGrayColor pbx-rounded-r-2xl pbx-shadow-sm"
+        class="pbx-w-16 pbx-pt-7 pbx-pb-2 pbx-bg-myPrimaryLightGrayColor pbx-rounded-r-2xl pbx-shadow-sm"
       >
         <div class="pbx-mx-2 pbx-flex pbx-flex-col pbx-myPrimaryGap pbx-items-stretch">
           <div class="pbx-flex pbx-gap-2 pbx-items-center pbx-justify-center">
@@ -847,7 +852,7 @@ onMounted(async () => {
                   handleAddComponent()
                 }
               "
-              class="pbx-h-10 pbx-w-10 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0 pbx-text-black hover:pbx-text-white"
+              class="pbx-h-10 pbx-w-10 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-myPrimaryLinkColor focus-visible:pbx-ring-0 pbx-text-black hover:pbx-text-white"
             >
               <span class="pbx-myMediumIcon material-symbols-outlined"> interests </span>
             </button>
@@ -863,11 +868,12 @@ onMounted(async () => {
           </div>
         </div>
       </div>
+      <!-- Left Menu End -->
 
       <main
         ref="pbxToolBar"
-        class="pbx-w-full pbx-transition-all pbx-duration-300 pbx-font-sans pbx-p-1 pbx-flex pbx-flex-col pbx-grow pbx-rounded-tr-2xl pbx-rounded-tl-2xl pbx-border-solid pbx-border pbx-border-gray-200 pbx-items-stretch pbx-text-black pbx-h-[100vh]"
-        :class="{ '': !getMenuRight, '': getMenuRight }"
+        class="pbx-transition-all pbx-duration-300 pbx-font-sans pbx-p-1 pbx-flex pbx-flex-col pbx-grow pbx-rounded-tr-2xl pbx-rounded-tl-2xl pbx-border-solid pbx-border pbx-border-gray-200 pbx-items-stretch pbx-text-black pbx-h-[100vh]"
+        :class="[getMenuRight ? 'pbx-w-full' : 'pbx-w-full']"
       >
         <div
           id="pbxEditToolbar"
@@ -908,11 +914,12 @@ onMounted(async () => {
           v-if="getMenuRight"
           aria-label="menu"
           id="pagebuilder-right-menu"
-          :class="{
-            'pbx-w-0 pbx-mr-0': !getMenuRight,
-            'pbx-w-80 pbx-bg-myPrimaryLightGrayColor pbx-items-stretch': getMenuRight,
-          }"
           class="pbx-z-20 pbx-flex-shrink-0 pbx-overflow-hidden pbx-border-0 pbx-border-solid pbx-border-l-0 pbx-border-l-gray-600 pbx-rounded-l-2xl pbx-h-[100vh] pbx-pl-2"
+          :class="[
+            getMenuRight
+              ? 'pbx-w-80 pbx-bg-myPrimaryLightGrayColor pbx-items-stretch'
+              : 'bpx-w-0 pbx-mr-0',
+          ]"
         >
           <RightSidebarEditor @closeEditor="pageBuilderStateStore.setMenuRight(false)">
           </RightSidebarEditor>
@@ -924,7 +931,7 @@ onMounted(async () => {
               await pageBuilderService.clearHtmlSelection()
             }
           "
-          class="pbx-w-[10vh] pbx-bg-myPrimaryLightGrayColor pbx-pt-5 pbx-z-20 pbx-flex-shrink-0 pbx-overflow-hidden pbx-border-0 pbx-border-solid pbx-border-l-0 pbx-border-l-gray-600 pbx-rounded-l-2xl pbx-h-[100vh] pbx-pl-2 pbx-pr-2"
+          class="pbx-w-16 pbx-bg-myPrimaryLightGrayColor pbx-pt-5 pbx-z-20 pbx-flex-shrink-0 pbx-overflow-hidden pbx-border-0 pbx-border-solid pbx-border-l-0 pbx-border-l-gray-600 pbx-rounded-l-2xl pbx-h-[100vh] pbx-pl-2 pbx-pr-2"
         >
           <div
             @click.self="
@@ -946,9 +953,12 @@ onMounted(async () => {
         </div>
       </transition>
     </div>
+    <!-- Page Builder Main End -->
+
+    <!-- Footer Start -->
     <div
       id="pagebuilder-footer"
-      class="pbx-w-full pbx-flex pbx-items-center pbx-justify-center pbx-p-4 pbx-border-0 pbx-border-t pbx-border-t-gray-200 pbx-border-solid pbx-bg-myPrimaryLightGrayColor"
+      class="lg:pbx-min-w-full lg:pbx-max-w-full lg:pbx-w-full pbx-min-w-[96rem] pbx-max-w-[96rem] pbx-w-[96rem] pbx-flex-1 pbx-flex pbx-items-center pbx-justify-center pbx-p-4 pbx-border-0 pbx-border-t pbx-border-t-gray-200 pbx-border-solid pbx-bg-myPrimaryLightGrayColor"
     >
       <div
         @click="
@@ -965,13 +975,14 @@ onMounted(async () => {
         <div class="pbx-flex pbx-gap-2 pbx-items-center pbx-justify-center">
           <button
             type="button"
-            class="pbx-h-10 pbx-w-10 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0 pbx-text-black hover:pbx-text-white"
+            class="pbx-h-10 pbx-w-10 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-myPrimaryLinkColor focus-visible:pbx-ring-0 pbx-text-black hover:pbx-text-white"
           >
             <span class="pbx-myMediumIcon material-symbols-outlined"> interests </span>
           </button>
         </div>
       </div>
     </div>
+    <!-- Footer End -->
   </div>
 </template>
 

package/src/services/PageBuilderService.ts

@@ -895,9 +895,11 @@ export class PageBuilderService {
   public handleManualSave = async () => {
     this.startEditing()
     this.pageBuilderStateStore.setIsSaving(true)
+    this.pageBuilderStateStore.setIsLoadingGlobal(true)
     this.saveDomComponentsToLocalStorage()
-    await delay(400)
+    await delay(300)
     this.pageBuilderStateStore.setIsSaving(false)
+    this.pageBuilderStateStore.setIsLoadingGlobal(false)
   }
 
   public cloneCompObjForDOMInsertion(componentObject: ComponentObject): ComponentObject {

package/src/tests/DefaultComponents/DefaultBuilderComponents.vue

@@ -20,6 +20,8 @@ defineProps({
   },
 })
 
+const isLoading = ref(false)
+
 const selectedCategory = ref('All')
 
 const categories = computed(() => {
@@ -39,6 +41,7 @@ const { closeAddComponentModal } = usePageBuilderModal()
 
 // Super simple component addition with professional modal closing!
 const handleDropComponent = async function (componentObject: ComponentObject) {
+  isLoading.value = true
   // Translate all occurrences of the hardcoded strings in the html_code
   const translatedHtmlCode = componentObject.html_code
     .replace(/Layouts and visual\./g, translate('Layouts and visual.'))
@@ -56,6 +59,7 @@ const handleDropComponent = async function (componentObject: ComponentObject) {
 
   await pageBuilderService.addComponent(translatedComponentObject)
   closeAddComponentModal()
+  isLoading.value = false
 }
 
 // Helper function to convert ComponentData to ComponentObject
@@ -92,72 +96,95 @@ const getSvgPreview = (title: string) => {
 
 <template>
   <div>
-    <!-- Helper Components Section -->
-    <div class="pbx-mb-8">
-      <h3 class="pbx-myQuaternaryHeader pbx-mb-4">{{ translate('Helper Components') }}</h3>
-      <div
-        class="pbx-px-2 pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-2 md:pbx-grid-cols-3 lg:pbx-grid-cols-4 pbx-gap-4"
-      >
+    <template v-if="isLoading">
+      <div class="pbx-min-h-[85vh] pbx-h-[85vh]">
+        <div class="pbx-flex pbx-items-center pbx-justify-center">
+          <div
+            class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
+          >
+            <span
+              class="!pbx-absolute !pbx-m-px !pbx-h-px !pbx-w-px !pbx-overflow-hidden !pbx-whitespace-nowrap !pbx-border-0 !pbx-p-0 !pbx-[clip:rect(0,0,0,0)]"
+              >{{ translate('Loading...') }}</span
+            >
+          </div>
+        </div>
+      </div>
+    </template>
+    <div v-if="!isLoading">
+      <!-- Helper Components Section -->
+      <div class="pbx-mb-8">
+        <h3 class="pbx-myQuaternaryHeader pbx-mb-4">{{ translate('Helper Components') }}</h3>
         <div
-          v-for="helper in componentHelpers"
-          :key="helper.title"
-          class="pbx-border-solid pbx-border pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer pbx-p-4"
-          @click="handleDropComponent(helper)"
+          class="pbx-px-2 pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-2 md:pbx-grid-cols-3 lg:pbx-grid-cols-4 pbx-gap-4"
         >
-          <div class="pbx-max-h-72 pbx-cursor-pointer pbx-object-contain pbx-bg-white pbx-mx-auto">
-            <div v-if="false" class="pbx-mr-2" v-html="helper.icon"></div>
-            <h4 class="pbx-myPrimaryParagraph pbx-text-base pbx-font-medium">
-              {{ translate(helper.title) }}
-            </h4>
-          </div>
-          <div class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-normal pbx-pt-2">
-            {{ translate('Click to add') }} {{ helper.title.toLowerCase() }}
-            {{ translate('component') }}
+          <div
+            v-for="helper in componentHelpers"
+            :key="helper.title"
+            class="pbx-border-solid pbx-border pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer pbx-p-4"
+            @click="handleDropComponent(helper)"
+          >
+            <div
+              class="pbx-max-h-72 pbx-cursor-pointer pbx-object-contain pbx-bg-white pbx-mx-auto"
+            >
+              <div v-if="false" class="pbx-mr-2" v-html="helper.icon"></div>
+              <h4 class="pbx-myPrimaryParagraph pbx-text-base pbx-font-medium">
+                {{ translate(helper.title) }}
+              </h4>
+            </div>
+            <div class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-normal pbx-pt-2">
+              {{ translate('Click to add') }} {{ helper.title.toLowerCase() }}
+              {{ translate('component') }}
+            </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <!-- Regular Components Section -->
-    <div class="pbx-px-2" v-if="customMediaComponent">
-      <h3 class="pbx-myQuaternaryHeader pbx-mb-4">{{ translate('Layout Components') }}</h3>
-      <div class="pbx-mb-4 pbx-flex pbx-jusitify-left pbx-items-center pbx-gap-2">
-        <button
-          v-for="category in categories"
-          :key="category"
-          @click="selectedCategory = category"
-          class="pbx-mySecondaryButton pbx-px-2 pbx-text-xs"
-          :class="{ active: selectedCategory === category }"
-        >
-          {{ translate(category) }}
-        </button>
-      </div>
-      <div class="pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-2 md:pbx-grid-cols-3 pbx-gap-4">
+      <!-- Regular Components Section -->
+      <div class="pbx-px-2" v-if="customMediaComponent">
+        <h3 class="pbx-myQuaternaryHeader pbx-mb-4">{{ translate('Layout Components') }}</h3>
+        <div class="pbx-mb-4 pbx-flex pbx-jusitify-left pbx-items-center pbx-gap-2">
+          <button
+            v-for="category in categories"
+            :key="category"
+            @click="selectedCategory = category"
+            class="pbx-mySecondaryButton pbx-px-2 pbx-text-xs"
+            :class="{ active: selectedCategory === category }"
+          >
+            {{ translate(category) }}
+          </button>
+        </div>
         <div
-          v-for="comp in filteredComponents"
-          :key="comp.title"
-          class="pbx-border-solid pbx-border pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer"
-          @click="handleDropComponent(convertToComponentObject(comp))"
+          class="pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-2 md:pbx-grid-cols-3 pbx-gap-4 pbx-pb-4"
         >
           <div
-            class="pbx-overflow-hidden pbx-whitespace-pre-line pbx-flex-1 pbx-h-auto pbx-border-solid pbx-border-b pbx-border-gray-200 lg:pbx-py-10 pbx-py-8 pbx-px-2"
+            v-for="comp in filteredComponents"
+            :key="comp.title"
+            class="pbx-border-solid pbx-border pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer"
+            @click="handleDropComponent(convertToComponentObject(comp))"
           >
-            <!-- Use SVG preview instead of external images -->
             <div
-              class="pbx-max-h-72 pbx-cursor-pointer pbx-bg-white pbx-mx-auto pbx-flex pbx-items-center pbx-justify-center"
-              v-html="getSvgPreview(comp.title)"
-            ></div>
-          </div>
-          <div class="pbx-p-3">
-            <h4 class="pbx-myPrimaryParagraph pbx-text-sm pbx-font-normal">
-              {{ translate(comp.title) }}
-            </h4>
-            <div class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-normal pbx-pt-2">
-              {{ translate('Click to add component') }}
+              class="pbx-overflow-hidden pbx-whitespace-pre-line pbx-flex-1 pbx-h-auto pbx-border-solid pbx-border-b pbx-border-gray-200 lg:pbx-py-10 pbx-py-8 pbx-px-2"
+            >
+              <!-- Use SVG preview instead of external images -->
+              <div
+                class="pbx-max-h-72 pbx-cursor-pointer pbx-bg-white pbx-mx-auto pbx-flex pbx-items-center pbx-justify-center"
+                v-html="getSvgPreview(comp.title)"
+              ></div>
+            </div>
+            <div class="pbx-p-3">
+              <h4 class="pbx-myPrimaryParagraph pbx-text-sm pbx-font-normal">
+                {{ translate(comp.title) }}
+              </h4>
+              <div class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-normal pbx-pt-2">
+                {{ translate('Click to add component') }}
+              </div>
             </div>
           </div>
         </div>
       </div>
+      <div>
+        <button class="pbx-sr-only">Focusable fallback</button>
+      </div>
     </div>
   </div>
 </template>

package/src/tests/TestComponents/DemoUnsplash.vue

@@ -98,12 +98,16 @@ const nextPage = async function () {
   fetchUnsplash()
 }
 
+const isLoading = ref(false)
+
 const applySelectedImage = async function (imageURL) {
+  isLoading.value = true
   await pageBuilderService.applySelectedImage({
     src: `${imageURL}`,
   })
 
   closeMediaLibraryModal()
+  isLoading.value = false
 }
 
 // on mounted
@@ -116,8 +120,20 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div>
-    <div>
+  <div class="pbx-min-h-[85vh] pbx-h-[85vh]">
+    <div v-if="getIsLoading || isLoading">
+      <div class="pbx-flex pbx-items-center pbx-justify-center">
+        <div
+          class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
+        >
+          <span
+            class="!pbx-absolute !pbx-m-px !pbx-h-px !pbx-w-px !pbx-overflow-hidden !pbx-whitespace-nowrap !pbx-border-0 !pbx-p-0 !pbx-[clip:rect(0,0,0,0)]"
+            >{{ translate('Loading...') }}</span
+          >
+        </div>
+      </div>
+    </div>
+    <div v-if="!isLoading && !getIsLoading">
       <form
         @submit.prevent="
           () => {
@@ -268,18 +284,6 @@ onMounted(async () => {
 
         <div class="pbx-min-h-[33rem] pbx-max-h-[33rem] pbx-flex pbx-gap-6">
           <div class="pbx-w-9/12 pbx-pr-1 pbx-rounded-lg pbx-overflow-y-auto">
-            <div v-if="getIsLoading">
-              <div class="pbx-flex pbx-items-center pbx-justify-center pbx-mt-4">
-                <div
-                  class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
-                >
-                  <span
-                    class="!pbx-absolute !pbx-m-px !pbx-h-px !pbx-w-px !pbx-overflow-hidden !pbx-whitespace-nowrap !pbx-border-0 !pbx-p-0 !pbx-[clip:rect(0,0,0,0)]"
-                    >{{ translate('Loading...') }}</span
-                  >
-                </div>
-              </div>
-            </div>
             <div v-if="getUnsplashImages && getUnsplashImages.results">
               <div
                 v-if="!getIsLoading"
@@ -399,9 +403,9 @@ onMounted(async () => {
         </div>
         <!-- Actions footer # end -->
       </div>
-    </div>
-    <div>
-      <button class="pbx-sr-only">Focusable fallback</button>
+      <div>
+        <button class="pbx-sr-only">Focusable fallback</button>
+      </div>
     </div>
   </div>
 </template>