feat: update CreateEditSkeleton component to accept resource prop and enhance Skeleton loading states

Author: kulikp1

adminforth/spa/src/afcl/Skeleton.vue

@@ -17,7 +17,7 @@
     <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]"
+        :class="['animate-pulse bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-default', $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>

adminforth/spa/src/views/CreateEditSkeleton.vue

@@ -11,57 +11,96 @@
         </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">
+      <template v-for="column in visibleColumns" :key="column.name">
+        <div
+          v-if="isMarkdownEditor(column)"
+          class="flex items-start bg-lightForm dark:bg-darkForm border-b border-gray-100 dark:border-darkFormBorder"
+        >
+          <div class="w-[208px] flex-shrink-0 px-6 pt-7">
             <Skeleton class="w-24 h-[10px]" />
           </div>
-          
-          <div class="flex-1 px-6"> 
-            <div v-if="i === 2">
-              <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 class="flex-1 px-6 pt-4 flex flex-col pb-6">
+            <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 h-[46px]">
+              <template v-for="btn in skeletonButtons" :key="btn.id">
+                <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>
 
-      <div class="flex items-start bg-lightForm dark:bg-darkForm" style="height: 759px;">
-        <div class="w-[208px] flex-shrink-0 px-6 pt-7">
-           <Skeleton class="w-24 h-[10px]" />
+            <div class="animate-pulse bg-white dark:bg-gray-950 border-x border-b border-gray-200 dark:border-gray-700 rounded-b-lg w-full h-[670px]"></div>
+          </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=" 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
+          v-else
+          class="flex items-center bg-lightForm dark:bg-darkForm border-b border-gray-100 dark:border-darkFormBorder"
+          :style="{ height: getFieldHeight(column) }"
+        >
+          <div class="w-[208px] flex-shrink-0 px-6 flex items-center">
+            <Skeleton class="w-24 h-[10px]" />
+          </div>
+
+          <div class="flex-1 px-6">
+            <Skeleton type="input" :class="getSkeletonInputClass(column)" />
+
+            <div v-if="hasEditingNote(column)" class="mt-1">
+              <Skeleton class="h-[12px] w-20" />
+            </div>
           </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>
+
+      </template>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { markRaw } from 'vue';
-import { IconExclamationCircleSolid } from '@iconify-prerendered/vue-flowbite';
-import { 
+import { computed, markRaw } from 'vue';
+import {
   IconLinkOutline, IconCodeOutline, IconRectangleListOutline, 
   IconOrderedListOutline, IconLetterBoldOutline, IconLetterUnderlineOutline, 
   IconLetterItalicOutline, IconTextSlashOutline 
 } from '@iconify-prerendered/vue-flowbite';
 import { IconH116Solid, IconH216Solid, IconH316Solid } from '@iconify-prerendered/vue-heroicons';
 import { Skeleton } from '@/afcl';
 
+interface Props {
+  resource?: any;
+  page?: string;}
+
+const props = withDefaults(defineProps<Props>(), {
+  page: 'edit'
+});
+
+const visibleColumns = computed(() => {
+  if (!props.resource?.columns) return [];
+
+  return props.resource.columns.filter((col: any) => {
+    if (col.virtual) return false;
+    if (col.primaryKey) return false;
+    if (col.backendOnly) return false;
+    if (col.showIn?.[props.page] === false) return false;
+    return true;
+  });
+});
+
+const isMarkdownEditor = (column: any) => column.name === 'description';
+
+const hasEditingNote = (column: any) => !!column.editingNote;
+
+const getFieldHeight = (column: any) =>
+  hasEditingNote(column) ? '95px' : '75px';
+
+const getSkeletonInputClass = (column: any) => {
+  if (['integer', 'decimal', 'float'].includes(column.type)) {
+    return 'h-[42px] w-[160px]';
+  }
+  return 'h-[42px] w-full';
+};
+
 const skeletonButtons = [
   { id: 'bold', icon: markRaw(IconLetterBoldOutline), sep: false },
   { id: 'italic', icon: markRaw(IconLetterItalicOutline), sep: false },

adminforth/spa/src/views/EditView.vue

@@ -41,7 +41,7 @@
       :adminUser="coreStore.adminUser"
     />
 
-    <CreateEditSkeleton v-if="loading"></CreateEditSkeleton>
+    <CreateEditSkeleton :resource="coreStore.resource" v-if="loading"></CreateEditSkeleton>
 
     <ResourceForm 
       v-else-if="coreStore.resource"