From 7f4e1599d578578b95923a1c6965f743d0d6b295 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Sep 2023 22:01:37 +0530
Subject: [PATCH] fix: preloader style

---
 .../components/ListChildItems.vue             | 22 +++++++++----------
 .../virtual-cell/components/ListItems.vue     | 22 +++++++++----------
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
index 194fe8180f..b71cd07317 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
@@ -183,24 +183,24 @@ onKeyStroke('Escape', () => {
               class="!border-2 flex flex-row gap-2 mb-2 transition-all !rounded-xl relative !border-gray-200 hover:bg-gray-50"
             >
               <a-skeleton-image class="h-24 w-24 !rounded-xl" />
-              <div class="flex flex-col m-[.75rem] gap-1 flex-grow justify-center">
-                <a-skeleton-input style="width: 200px" active size="small" />
-                <div class="flex flex-row gap-4 w-10/12">
+              <div class="flex flex-col m-[.5rem] gap-2 flex-grow justify-center">
+                <a-skeleton-input class="!w-48 !rounded-xl" active size="small" />
+                <div class="flex flex-row gap-6 w-10/12">
                   <div class="flex flex-col gap-0.5">
-                    <a-skeleton-input style="width: 70px" active size="small" />
-                    <a-skeleton-input style="width: 140px" active size="small" />
+                    <a-skeleton-input class="!h-4 !w-12" active size="small" />
+                    <a-skeleton-input class="!h-4 !w-24" active size="small" />
                   </div>
                   <div class="flex flex-col gap-0.5">
-                    <a-skeleton-input style="width: 70px" active size="small" />
-                    <a-skeleton-input style="width: 140px" active size="small" />
+                    <a-skeleton-input class="!h-4 !w-12" active size="small" />
+                    <a-skeleton-input class="!h-4 !w-24" active size="small" />
                   </div>
                   <div class="flex flex-col gap-0.5">
-                    <a-skeleton-input style="width: 70px" active size="small" />
-                    <a-skeleton-input style="width: 140px" active size="small" />
+                    <a-skeleton-input class="!h-4 !w-12" active size="small" />
+                    <a-skeleton-input class="!h-4 !w-24" active size="small" />
                   </div>
                   <div class="flex flex-col gap-0.5">
-                    <a-skeleton-input style="width: 70px" active size="small" />
-                    <a-skeleton-input style="width: 140px" active size="small" />
+                    <a-skeleton-input class="!h-4 !w-12" active size="small" />
+                    <a-skeleton-input class="!h-4 !w-24" active size="small" />
                   </div>
                 </div>
               </div>
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
index 664c7fa94b..58bc8afb91 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
@@ -218,24 +218,24 @@ onKeyStroke('Escape', () => {
               class="!border-2 flex flex-row gap-2 mb-2 transition-all !rounded-xl relative !border-gray-200 hover:bg-gray-50"
             >
               <a-skeleton-image class="h-24 w-24 !rounded-xl" />
-              <div class="flex flex-col m-[.75rem] gap-1 flex-grow justify-center">
-                <a-skeleton-input style="width: 200px" active size="small" />
-                <div class="flex flex-row gap-4 w-10/12">
+              <div class="flex flex-col m-[.5rem] gap-2 flex-grow justify-center">
+                <a-skeleton-input class="!w-48 !rounded-xl" active size="small" />
+                <div class="flex flex-row gap-6 w-10/12">
                   <div class="flex flex-col gap-0.5">
-                    <a-skeleton-input style="width: 70px" active size="small" />
-                    <a-skeleton-input style="width: 140px" active size="small" />
+                    <a-skeleton-input class="!h-4 !w-12" active size="small" />
+                    <a-skeleton-input class="!h-4 !w-24" active size="small" />
                   </div>
                   <div class="flex flex-col gap-0.5">
-                    <a-skeleton-input style="width: 70px" active size="small" />
-                    <a-skeleton-input style="width: 140px" active size="small" />
+                    <a-skeleton-input class="!h-4 !w-12" active size="small" />
+                    <a-skeleton-input class="!h-4 !w-24" active size="small" />
                   </div>
                   <div class="flex flex-col gap-0.5">
-                    <a-skeleton-input style="width: 70px" active size="small" />
-                    <a-skeleton-input style="width: 140px" active size="small" />
+                    <a-skeleton-input class="!h-4 !w-12" active size="small" />
+                    <a-skeleton-input class="!h-4 !w-24" active size="small" />
                   </div>
                   <div class="flex flex-col gap-0.5">
-                    <a-skeleton-input style="width: 70px" active size="small" />
-                    <a-skeleton-input style="width: 140px" active size="small" />
+                    <a-skeleton-input class="!h-4 !w-12" active size="small" />
+                    <a-skeleton-input class="!h-4 !w-24" active size="small" />
                   </div>
                 </div>
               </div>