From 767971be433a4eee3203078c8c55c8d9b1f28a6b Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Thu, 21 Sep 2023 09:31:54 +0800
Subject: [PATCH] :art: fix https://github.com/siyuan-note/siyuan/issues/9092

---
 app/src/assets/scss/business/_av.scss     |  5 +++++
 app/src/protyle/hint/index.ts             |  2 ++
 app/src/protyle/render/av/action.ts       | 17 +++++++++++++++++
 app/src/protyle/util/editorCommonEvent.ts |  3 +++
 4 files changed, 27 insertions(+)

diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss
index 08e1db3c1..c38b9cdf0 100644
--- a/app/src/assets/scss/business/_av.scss
+++ b/app/src/assets/scss/business/_av.scss
@@ -246,6 +246,11 @@
     &:hover svg {
       opacity: 1;
     }
+
+    img {
+      height: 36px;
+      width: 24px;
+    }
   }
 
   &__widthdrag {
diff --git a/app/src/protyle/hint/index.ts b/app/src/protyle/hint/index.ts
index 3c51766e0..7d72dc997 100644
--- a/app/src/protyle/hint/index.ts
+++ b/app/src/protyle/hint/index.ts
@@ -33,6 +33,7 @@ import {isMobile} from "../../util/functions";
 import {isCtrl, isIPhone} from "../util/compatibility";
 import {avRender} from "../render/av/render";
 import {genIconHTML} from "../render/util";
+import {insertAttrViewBlockAnimation} from "../render/av/action";
 
 export class Hint {
     public timeId: number;
@@ -452,6 +453,7 @@ ${genHintItemHTML(item)}
                     avID,
                 }]);
             }
+            insertAttrViewBlockAnimation(nodeElement, 1, previousID);
             return;
         }
         this.enableExtend = false;
diff --git a/app/src/protyle/render/av/action.ts b/app/src/protyle/render/av/action.ts
index 433a55fbe..f001953d0 100644
--- a/app/src/protyle/render/av/action.ts
+++ b/app/src/protyle/render/av/action.ts
@@ -296,3 +296,20 @@ export const updateAVName = (protyle: IProtyle, blockElement: Element) => {
     }]);
     nameElement.dataset.title = nameElement.textContent.trim();
 };
+
+export const insertAttrViewBlockAnimation = (blockElement: Element, size: number, previousId: string) => {
+    const previousElement = blockElement.querySelector(`.av__row[data-id="${previousId}"]`) || blockElement.querySelector(`.av__row--header`);
+    let colHTML = ""
+    previousElement.querySelectorAll(".av__cell").forEach((item: HTMLElement) => {
+        colHTML += `<div class="av__cell" style="width: ${item.style.width}"></div>`
+    })
+
+    let html = ""
+    new Array(size).fill(1).forEach(() => {
+        html += `<div class="av__row">
+    <div class="av__firstcol"><img src="/stage/loading-pure.svg"></div>
+    ${colHTML}
+</div>`
+    })
+    previousElement.insertAdjacentHTML("afterend", html)
+}
diff --git a/app/src/protyle/util/editorCommonEvent.ts b/app/src/protyle/util/editorCommonEvent.ts
index c943af66a..52376dc0c 100644
--- a/app/src/protyle/util/editorCommonEvent.ts
+++ b/app/src/protyle/util/editorCommonEvent.ts
@@ -19,6 +19,7 @@ import {uploadLocalFiles} from "../upload";
 import {insertHTML} from "./insertHTML";
 import {isBrowser} from "../../util/functions";
 import {hideElements} from "../ui/hideElements";
+import {insertAttrViewBlockAnimation} from "../render/av/action";
 
 const moveToNew = (protyle: IProtyle, sourceElements: Element[], targetElement: Element, newSourceElement: Element,
                    isSameDoc: boolean, isBottom: boolean, isCopy: boolean) => {
@@ -882,6 +883,7 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
                             srcIDs: sourceIds,
                             avID,
                         }]);
+                        insertAttrViewBlockAnimation(blockElement, sourceIds.length, previousID);
                     }
                     return;
                 }
@@ -941,6 +943,7 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
                     srcIDs: ids,
                     avID,
                 }]);
+                insertAttrViewBlockAnimation(blockElement, ids.length, previousID);
                 return;
             }
             for (let i = 0; i < ids.length; i++) {