From 4f9fd9ef98c8246e209924d4137d0e748455ec00 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 09:05:37 +0200
Subject: [PATCH] feat(gui-v2): add skeleton img while loading

---
 packages/nc-gui-v2/components.d.ts                      | 1 +
 packages/nc-gui-v2/components/cell/attachment/Modal.vue | 8 ++++++++
 2 files changed, 9 insertions(+)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 9d7df38fcc..88ada17810 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -45,6 +45,7 @@ declare module '@vue/runtime-core' {
     ASelect: typeof import('ant-design-vue/es')['Select']
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ASkeleton: typeof import('ant-design-vue/es')['Skeleton']
+    ASkeletonImage: typeof import('ant-design-vue/es')['SkeletonImage']
     ASpin: typeof import('ant-design-vue/es')['Spin']
     ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
     ASwitch: typeof import('ant-design-vue/es')['Switch']
diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
index 9c1ff958fc..2e09a67057 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -122,6 +122,14 @@ onKeyDown('Escape', () => {
             {{ item.title }}
           </div>
         </div>
+
+        <div v-if="isLoading" class="flex flex-col gap-1">
+          <a-card class="nc-attachment-item group">
+            <div class="nc-attachment h-full w-full flex items-center justify-center">
+              <a-skeleton-image class />
+            </div>
+          </a-card>
+        </div>
       </div>
     </div>
   </a-modal>