fix: 添加浮窗 loading 提升用户体验

siyuan/iframeEvent.ts

@@ -25,6 +25,7 @@
 
 import { popContentIframeId } from "~/siyuan/siyuanConstants"
 import { createAppLogger } from "~/common/appLogger"
+import SiyuanBlog from "~/siyuan/index"
 
 const logger = createAppLogger("iframe-events")
 let added = false
@@ -69,7 +70,7 @@ const adjustIframeHeight = (iframeId: string, customHeight?: number) => {
 /**
  * 注册 iframe 事件
  */
-export const registerIframeEvent = () => {
+export const registerIframeEvent = (pluginInstance: SiyuanBlog) => {
   // 监听 message 事件
   window.addEventListener("message", (event) => {
     const iframe = document.getElementById(popContentIframeId) as HTMLIFrameElement
@@ -79,6 +80,9 @@ export const registerIframeEvent = () => {
       const data = event.data
       // 判断消息类型
       if (data.type === "updateHeight") {
+        logger.info(`Try to cancel loading`)
+        pluginInstance.popView.cancelLoading()
+
         logger.info(`Received update height message from iframe`)
         const height = data.height
         // 更新 iframe 高度

siyuan/index.styl

@@ -54,3 +54,53 @@
     margin 0
     padding 0
     overflow hidden
+
+.loading-spinner {
+  width: 64px;
+  height: 64px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 5px;
+}
+
+.loading-spinner > div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  margin: -10px 0 0 -10px;
+  border-radius: 50%;
+  border: 2px solid #3498db;
+  border-bottom-color: transparent;
+  animation: loading-spinner-animation 0.75s 0s linear infinite;
+}
+
+.loading-spinner > div:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.loading-spinner > div:nth-child(2) {
+  animation-delay: -0.6s;
+}
+
+.loading-spinner > div:nth-child(3) {
+  animation-delay: -0.4s;
+}
+
+.loading-spinner > div:nth-child(4) {
+  animation-delay: -0.2s;
+}
+
+@keyframes loading-spinner-animation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

siyuan/index.ts

@@ -34,6 +34,8 @@ import { registerIframeEvent } from "~/siyuan/iframeEvent"
 export default class SiyuanBlog extends Plugin {
   public isMobile
   public logger
+  public popView: any
+
   constructor(options: { app: App; id: string; name: string; i18n: IObject }) {
     super(options)
 
@@ -48,7 +50,7 @@ export default class SiyuanBlog extends Plugin {
     // 初始化顶部栏以及图标
     initTopbar(this)
     // 注册 iframe 事件
-    registerIframeEvent()
+    registerIframeEvent(this)
   }
 
   openSetting() {

siyuan/topbar.ts

@@ -48,7 +48,10 @@ export function initTopbar(pluginInstance: SiyuanBlog) {
   topBarElement.addEventListener("click", async () => {
     const sharePage =
       "/plugins/siyuan-blog/#/share?id=" + PageUtil.getPageId() + "&origin=" + getAvailableOrigin() + "&isSsr=false"
-    showPopView(pluginInstance, topBarElement, sharePage)
+    const popView = showPopView(pluginInstance, topBarElement, sharePage, {
+      showLoading: true,
+    })
+    pluginInstance.popView = popView
   })
 
   // topBarElement.addEventListener("click", async () => {
@@ -136,8 +139,14 @@ const showPage = (pluginInstance: SiyuanBlog, pageUrl: string, title?: string) =
  * @param pluginInstance 插件实例对象
  * @param boxElement 被点击的 box 元素
  * @param pageUrl 当前页面的 URL
+ * @param options
  */
-const showPopView = (pluginInstance: SiyuanBlog, boxElement: HTMLElement, pageUrl: string) => {
+const showPopView = (
+  pluginInstance: SiyuanBlog,
+  boxElement: HTMLElement,
+  pageUrl: string,
+  options: { showLoading?: boolean; cancelLoading?: any } = {}
+) => {
   const popContentId = "pop-content"
   let popContent = document.getElementById(popContentId)
 
@@ -167,8 +176,28 @@ const showPopView = (pluginInstance: SiyuanBlog, boxElement: HTMLElement, pageUr
   popContent.style.opacity = "0"
   popContent.style.transition = "opacity 0.3s ease-in-out"
 
+  // 添加loading效果
+  if (options.showLoading) {
+    const loadingElement = document.createElement("div")
+    loadingElement.className = "loading-spinner"
+    for (let i = 0; i < 4; i++) {
+      const divElement = document.createElement("div")
+      loadingElement.appendChild(divElement)
+    }
+    popContent.appendChild(loadingElement)
+
+    // 定义cancelLoading函数，用于取消loading
+    const cancelLoading = () => {
+      popContent?.removeChild(loadingElement)
+    }
+
+    // 在option中添加cancelLoading函数
+    options.cancelLoading = cancelLoading
+  }
+
   // 填充内容
-  popContent.innerHTML = contentElement(pageUrl).innerHTML
+  const content = contentElement(pageUrl)
+  popContent.appendChild(content)
 
   document.body.appendChild(popContent)
 
@@ -201,4 +230,6 @@ const showPopView = (pluginInstance: SiyuanBlog, boxElement: HTMLElement, pageUr
       }
     }, 300) // 等待 300ms，即过渡时间，然后再删除浮动框
   }
+
+  return options
 }