feat: implement new skeleton loader structure and remove unused code

Author: kulikp1

adminforth/spa/src/views/CreateEditSkeleton.vue

@@ -2,7 +2,7 @@
   <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;">
+      <div class="flex px-6 items-center border-b border-gray-200 dark:border-darkFormBorder bg-lightFormHeading dark:bg-darkFormHeading h-[40px]">
         <div class="w-[208px] flex-shrink-0 pr-6 text-xs text-lightListTableHeadingText uppercase dark:text-darkListTableHeadingText font-bold">
           {{ $t('Field') }}
         </div>
@@ -11,83 +11,24 @@
         </div>
       </div>
 
-      <template v-for="column in visibleColumns" :key="column.name">
-        <div
-          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-for="i in 10"
+        :key="i"
+        class="flex items-center bg-lightForm dark:bg-darkForm border-b border-gray-100 dark:border-darkFormBorder h-[75px]"
+      >
+        <div class="w-[208px] flex-shrink-0 px-6 flex items-center">
+          <Skeleton class="w-24 h-[10px]" />
+        </div>
 
-            <div v-if="hasEditingNote(column)" class="mt-1">
-              <Skeleton class="h-[12px] w-20" />
-            </div>
-          </div>
+        <div class="flex-1 px-6">
+          <Skeleton  class="h-[10px] w-full" />
         </div>
+      </div>
 
-      </template>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-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 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 },
-  { 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>