From 64adac82ee8f293fd4d5973aad26e4893227ef72 Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Thu, 9 Apr 2026 14:40:24 +0300
Subject: [PATCH 1/4] feat: implement CreateEditSkeleton loader component and
 replace SingleSkeletLoader in CreateView and EditView

---
 .../spa/src/views/CreateEditSkeleton.vue      | 77 +++++++++++++++++++
 adminforth/spa/src/views/CreateView.vue       |  3 +-
 adminforth/spa/src/views/EditView.vue         |  3 +-
 3 files changed, 81 insertions(+), 2 deletions(-)
 create mode 100644 adminforth/spa/src/views/CreateEditSkeleton.vue

diff --git a/adminforth/spa/src/views/CreateEditSkeleton.vue b/adminforth/spa/src/views/CreateEditSkeleton.vue
new file mode 100644
index 00000000..eaabba87
--- /dev/null
+++ b/adminforth/spa/src/views/CreateEditSkeleton.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="w-full mt-[36px] animate-pulse">
+    <div class="w-full border dark:border-darkFormBorder border-gray-200 rounded-lg overflow-hidden shadow-resourseFormShadow dark:shadow-darkResourseFormShadow bg-white dark:bg-darkForm">
+      
+      <div class="flex px-6 items-center border-b border-gray-200 dark:border-darkFormBorder bg-lightFormHeading dark:bg-darkFormHeading" style="height: 40px;">
+        <div class="w-[208px] flex-shrink-0 pr-6 text-xs text-lightListTableHeadingText uppercase dark:text-darkListTableHeadingText font-bold">
+          {{ $t('Field') }}
+        </div>
+        <div class="flex-1 text-xs text-lightListTableHeadingText uppercase dark:text-darkListTableHeadingText font-bold">
+          {{ $t('Value') }}
+        </div>
+      </div>
+
+      <div v-for="i in 5" :key="i" 
+        class="flex items-center bg-lightForm dark:bg-darkForm border-b border-gray-100 dark:border-darkFormBorder"
+        :style="{ height: i === 2 ? '95px' : '75px' }"
+      >
+          <div class="w-[208px] flex-shrink-0 px-6 flex items-center gap-1">
+            <div class="h-[10px] bg-gray-200 dark:bg-gray-700 rounded-full w-24"></div>
+          </div>
+          
+          <div class="flex-1 px-6"> 
+            <div v-if="i === 2">
+              <div class="h-[42px] bg-gray-50 dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700 w-[160px]"></div>
+              <div class="mt-1 h-[12px] bg-gray-100 dark:bg-gray-800 rounded w-20"></div>
+            </div>
+            <div v-else-if="i === 4 || i === 5" class="h-[42px] bg-gray-50 dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700 w-[160px]"></div>
+            <div v-else class="h-[42px] bg-gray-50 dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700 w-full "></div>
+          </div>
+      </div>
+
+      <div class="flex items-start bg-lightForm dark:bg-darkForm" style="height: 759px;">
+        <div class="w-[208px] flex-shrink-0 px-6 pt-7">
+          <div class="h-[10px] bg-gray-200 dark:bg-gray-700 rounded w-24"></div>
+        </div>
+        
+        <div class="flex-1 px-6 pt-4 h-full flex flex-col">
+          <div class="flex flex-wrap items-center gap-3 p-1.5 border border-gray-300 dark:border-gray-600 rounded-t-lg bg-gray-50 dark:bg-gray-800 w-full box-border h-[44px]">
+            <template v-for="btn in skeletonButtons" :key="btn.id">
+              <div class="flex items-center justify-center h-8 px-1 text-gray-300 dark:text-gray-600">
+                <component :is="btn.icon" class="w-5 h-5" />
+              </div>
+              <div v-if="btn.sep" class="w-px h-4 bg-gray-300 dark:bg-gray-600 mx-1"></div>
+            </template>
+          </div>
+          <div class="flex-1 bg-white dark:bg-gray-950 border-x border-b border-gray-200 dark:border-gray-700 rounded-b-lg w-full shadow-inner"></div>
+          <div class="h-10"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { markRaw } from 'vue';
+import { IconExclamationCircleSolid } from '@iconify-prerendered/vue-flowbite';
+import { 
+  IconLinkOutline, IconCodeOutline, IconRectangleListOutline, 
+  IconOrderedListOutline, IconLetterBoldOutline, IconLetterUnderlineOutline, 
+  IconLetterItalicOutline, IconTextSlashOutline 
+} from '@iconify-prerendered/vue-flowbite';
+import { IconH116Solid, IconH216Solid, IconH316Solid } from '@iconify-prerendered/vue-heroicons';
+
+const skeletonButtons = [
+  { id: 'bold', icon: markRaw(IconLetterBoldOutline), sep: false },
+  { id: 'italic', icon: markRaw(IconLetterItalicOutline), sep: false },
+  { id: 'underline', icon: markRaw(IconLetterUnderlineOutline), sep: false },
+  { id: 'strike', icon: markRaw(IconTextSlashOutline), sep: true },
+  { id: 'h1', icon: markRaw(IconH116Solid), sep: false },
+  { id: 'h2', icon: markRaw(IconH216Solid), sep: false },
+  { id: 'h3', icon: markRaw(IconH316Solid), sep: true },
+  { id: 'ul', icon: markRaw(IconRectangleListOutline), sep: false },
+  { id: 'ol', icon: markRaw(IconOrderedListOutline), sep: false },
+  { id: 'link', icon: markRaw(IconLinkOutline), sep: false },
+  { id: 'codeBlock', icon: markRaw(IconCodeOutline), sep: false },
+];
+</script>
\ No newline at end of file
diff --git a/adminforth/spa/src/views/CreateView.vue b/adminforth/spa/src/views/CreateView.vue
index 3f9440d0..00ec3092 100644
--- a/adminforth/spa/src/views/CreateView.vue
+++ b/adminforth/spa/src/views/CreateView.vue
@@ -42,7 +42,7 @@
       :adminUser="coreStore.adminUser"
     />
 
-    <SingleSkeletLoader v-if="loading"></SingleSkeletLoader>
+    <CreateEditSkeleton v-if="loading"></CreateEditSkeleton>
 
     
     <ResourceForm 
@@ -88,6 +88,7 @@ import { useI18n } from 'vue-i18n';
 import { type AdminForthComponentDeclaration, type AdminForthComponentDeclarationFull } from '@/types/Common.js';
 import { saveRecordPreparations } from '@/utils';
 import { Spinner } from '@/afcl'
+import CreateEditSkeleton from './CreateEditSkeleton.vue';
 
 const isValid = ref(false);
 const validatingMode = ref(false);
diff --git a/adminforth/spa/src/views/EditView.vue b/adminforth/spa/src/views/EditView.vue
index ddbb52e6..2a3d798f 100644
--- a/adminforth/spa/src/views/EditView.vue
+++ b/adminforth/spa/src/views/EditView.vue
@@ -41,7 +41,7 @@
       :adminUser="coreStore.adminUser"
     />
 
-    <SingleSkeletLoader v-if="loading"></SingleSkeletLoader>
+    <CreateEditSkeleton v-if="loading"></CreateEditSkeleton>
  
     <ResourceForm 
       v-else-if="coreStore.resource"
@@ -88,6 +88,7 @@ import { type AdminForthComponentDeclaration, type AdminForthComponentDeclaratio
 import type { AdminForthResourceColumn } from '@/types/Back';
 import { scrollToInvalidField, saveRecordPreparations } from '@/utils';
 import { Spinner } from '@/afcl'
+import CreateEditSkeleton from './CreateEditSkeleton.vue';
 
 const { t } = useI18n();
 const coreStore = useCoreStore();

From 6142bf8cbdb2286593fdc1cb8e4a48557386096a Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Thu, 9 Apr 2026 15:40:12 +0300
Subject: [PATCH 2/4] feat: add new skeleton type input

---
 adminforth/spa/src/afcl/Skeleton.vue          |  5 +++++
 .../spa/src/views/CreateEditSkeleton.vue      | 21 ++++++++++---------
 adminforth/spa/src/views/CreateView.vue       |  2 +-
 adminforth/spa/src/views/EditView.vue         |  2 +-
 4 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/adminforth/spa/src/afcl/Skeleton.vue b/adminforth/spa/src/afcl/Skeleton.vue
index 5a9e2231..914249f3 100644
--- a/adminforth/spa/src/afcl/Skeleton.vue
+++ b/adminforth/spa/src/afcl/Skeleton.vue
@@ -14,6 +14,11 @@
     <svg v-else-if="type === 'avatar'" class="me-3 animate-pulse text-lightSkeletonIconColor dark:text-darkSkeletonBackgroundColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
         <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/>
     </svg>
+    <div 
+        v-else-if="type === 'input'" 
+        role="input" 
+        :class="['animate-pulse bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded', $attrs.class]"
+    ></div>
     <div v-else role="status" class="flex items-center justify-center animate-pulse bg-lightSkeletonIconColor rounded-full dark:bg-darkSkeletonBackgroundColor">
         <span class="sr-only">Loading...</span>
     </div>
diff --git a/adminforth/spa/src/views/CreateEditSkeleton.vue b/adminforth/spa/src/views/CreateEditSkeleton.vue
index eaabba87..318391fc 100644
--- a/adminforth/spa/src/views/CreateEditSkeleton.vue
+++ b/adminforth/spa/src/views/CreateEditSkeleton.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full mt-[36px] animate-pulse">
+  <div class="w-full mt-[36px]">
     <div class="w-full border dark:border-darkFormBorder border-gray-200 rounded-lg overflow-hidden shadow-resourseFormShadow dark:shadow-darkResourseFormShadow bg-white dark:bg-darkForm">
       
       <div class="flex px-6 items-center border-b border-gray-200 dark:border-darkFormBorder bg-lightFormHeading dark:bg-darkFormHeading" style="height: 40px;">
@@ -16,34 +16,34 @@
         :style="{ height: i === 2 ? '95px' : '75px' }"
       >
           <div class="w-[208px] flex-shrink-0 px-6 flex items-center gap-1">
-            <div class="h-[10px] bg-gray-200 dark:bg-gray-700 rounded-full w-24"></div>
+            <Skeleton class="w-24 h-[10px]" />
           </div>
           
           <div class="flex-1 px-6"> 
             <div v-if="i === 2">
-              <div class="h-[42px] bg-gray-50 dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700 w-[160px]"></div>
-              <div class="mt-1 h-[12px] bg-gray-100 dark:bg-gray-800 rounded w-20"></div>
+              <Skeleton type="input" class="h-[42px] w-[160px]" />
+              <Skeleton class="mt-1 h-[12px] w-20" />
+            </div>
+                <Skeleton type="input" v-else-if="i === 4 || i === 5" class="h-[42px] w-[160px]" />
+                <Skeleton v-else type="input" class="h-[42px] w-full" />          
             </div>
-            <div v-else-if="i === 4 || i === 5" class="h-[42px] bg-gray-50 dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700 w-[160px]"></div>
-            <div v-else class="h-[42px] bg-gray-50 dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700 w-full "></div>
-          </div>
       </div>
 
       <div class="flex items-start bg-lightForm dark:bg-darkForm" style="height: 759px;">
         <div class="w-[208px] flex-shrink-0 px-6 pt-7">
-          <div class="h-[10px] bg-gray-200 dark:bg-gray-700 rounded w-24"></div>
+           <Skeleton class="w-24 h-[10px]" />
         </div>
         
         <div class="flex-1 px-6 pt-4 h-full flex flex-col">
           <div class="flex flex-wrap items-center gap-3 p-1.5 border border-gray-300 dark:border-gray-600 rounded-t-lg bg-gray-50 dark:bg-gray-800 w-full box-border h-[44px]">
             <template v-for="btn in skeletonButtons" :key="btn.id">
-              <div class="flex items-center justify-center h-8 px-1 text-gray-300 dark:text-gray-600">
+              <div class=" animate-pulse flex items-center justify-center h-8 px-1 text-gray-300 dark:text-gray-600">
                 <component :is="btn.icon" class="w-5 h-5" />
               </div>
               <div v-if="btn.sep" class="w-px h-4 bg-gray-300 dark:bg-gray-600 mx-1"></div>
             </template>
           </div>
-          <div class="flex-1 bg-white dark:bg-gray-950 border-x border-b border-gray-200 dark:border-gray-700 rounded-b-lg w-full shadow-inner"></div>
+          <div class="flex-1 animate-pulse bg-white dark:bg-gray-950 border-x border-b border-gray-200 dark:border-gray-700 rounded-b-lg w-full shadow-inner"></div>
           <div class="h-10"></div>
         </div>
       </div>
@@ -60,6 +60,7 @@ import {
   IconLetterItalicOutline, IconTextSlashOutline 
 } from '@iconify-prerendered/vue-flowbite';
 import { IconH116Solid, IconH216Solid, IconH316Solid } from '@iconify-prerendered/vue-heroicons';
+import { Skeleton } from '@/afcl';
 
 const skeletonButtons = [
   { id: 'bold', icon: markRaw(IconLetterBoldOutline), sep: false },
diff --git a/adminforth/spa/src/views/CreateView.vue b/adminforth/spa/src/views/CreateView.vue
index 00ec3092..566fc56b 100644
--- a/adminforth/spa/src/views/CreateView.vue
+++ b/adminforth/spa/src/views/CreateView.vue
@@ -188,7 +188,7 @@ onMounted(async () => {
     }
   }
   record.value = initialValues.value;
-  loading.value = false;
+  // loading.value = false;
   checkAcessByAllowedActions(coreStore.resourceOptions!.allowedActions,'create');
   initThreeDotsDropdown();
 });
diff --git a/adminforth/spa/src/views/EditView.vue b/adminforth/spa/src/views/EditView.vue
index 2a3d798f..2c52e62e 100644
--- a/adminforth/spa/src/views/EditView.vue
+++ b/adminforth/spa/src/views/EditView.vue
@@ -180,7 +180,7 @@ onMounted(async () => {
     checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'edit');
   }
 
-  loading.value = false;
+  // loading.value = false;
 });
 
 async function saveRecord() {

From 6d499c8283b0a76cb7713458e08e6b4ea033fb44 Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Thu, 9 Apr 2026 16:13:06 +0300
Subject: [PATCH 3/4] docs: add documentation for skeleton input

---
 .../docs/tutorial/03-Customization/15-afcl.md |  18 ++++++++++++++++++
 .../tutorial/03-Customization/image-100.png   | Bin 0 -> 7037 bytes
 2 files changed, 18 insertions(+)
 create mode 100644 adminforth/documentation/docs/tutorial/03-Customization/image-100.png

diff --git a/adminforth/documentation/docs/tutorial/03-Customization/15-afcl.md b/adminforth/documentation/docs/tutorial/03-Customization/15-afcl.md
index 2bd2aa3a..3061094f 100644
--- a/adminforth/documentation/docs/tutorial/03-Customization/15-afcl.md
+++ b/adminforth/documentation/docs/tutorial/03-Customization/15-afcl.md
@@ -1384,6 +1384,24 @@ Skeleton component is used to display a loading state for a component. You can u
   </div>
 </div>
 
+### Skeleton input
+<div class="split-screen" >
+  <div>
+  ```html
+    <div class="flex flex-col gap-2">
+      <Skeleton type="input" class="w-full h-4" />
+      <Skeleton type="input" class="w-full h-2" />
+      <Skeleton type="input" class="w-full h-2" />
+      <Skeleton type="input" class="w-full h-2" />
+      <Skeleton type="input" class="w-full h-2" />
+    </div>
+  ```
+  </div>
+  <div>
+  ![Spinner](image-100.png)
+  </div>
+</div>
+
 ### Skeleton video
 
 <div class="split-screen" >
diff --git a/adminforth/documentation/docs/tutorial/03-Customization/image-100.png b/adminforth/documentation/docs/tutorial/03-Customization/image-100.png
new file mode 100644
index 0000000000000000000000000000000000000000..2bf3549b78d43ce28d6f4917482b24355ef13ae7
GIT binary patch
literal 7037
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

literal 0
HcmV?d00001


From 63666c43f68021e058c9a4aa03d5f0d31a0aa5a7 Mon Sep 17 00:00:00 2001
From: Pavlo Kulyk <pkulyk@devforth.io>
Date: Thu, 9 Apr 2026 16:32:34 +0300
Subject: [PATCH 4/4] fix: delete comment

---
 adminforth/spa/src/views/CreateView.vue | 2 +-
 adminforth/spa/src/views/EditView.vue   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/adminforth/spa/src/views/CreateView.vue b/adminforth/spa/src/views/CreateView.vue
index 566fc56b..00ec3092 100644
--- a/adminforth/spa/src/views/CreateView.vue
+++ b/adminforth/spa/src/views/CreateView.vue
@@ -188,7 +188,7 @@ onMounted(async () => {
     }
   }
   record.value = initialValues.value;
-  // loading.value = false;
+  loading.value = false;
   checkAcessByAllowedActions(coreStore.resourceOptions!.allowedActions,'create');
   initThreeDotsDropdown();
 });
diff --git a/adminforth/spa/src/views/EditView.vue b/adminforth/spa/src/views/EditView.vue
index 2c52e62e..2a3d798f 100644
--- a/adminforth/spa/src/views/EditView.vue
+++ b/adminforth/spa/src/views/EditView.vue
@@ -180,7 +180,7 @@ onMounted(async () => {
     checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'edit');
   }
 
-  // loading.value = false;
+  loading.value = false;
 });
 
 async function saveRecord() {