feat: update createMenuButton to support async onClick handlers and enhance loading mask z-index for improved visibility

Author: chaxus

index.ts

@@ -264,7 +264,7 @@ const createFixedActionButton = () => {
     border: 1px solid rgba(0, 0, 0, 0.08);
   `;
 
-  const createMenuButton = (text: string, onClick: () => void) => {
+  const createMenuButton = (text: string, onClick: () => void | Promise<void>) => {
     // Create wrapper for the entire menu item
     const menuItem = document.createElement('div');
     menuItem.className = 'fab-menu-item';
@@ -297,9 +297,11 @@ const createFixedActionButton = () => {
       menuItem.style.background = 'transparent';
     });
 
-    button.addEventListener('click', () => {
-      onClick();
+    button.addEventListener('click', async () => {
       hideMenu();
+      // Small delay to ensure menu hide animation completes before showing loading
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      await onClick();
     });
 
     menuItem.appendChild(button);
@@ -317,18 +319,18 @@ const createFixedActionButton = () => {
     }),
   );
   menuPanel.appendChild(
-    createMenuButton(t('newWord'), () => {
-      onCreateNew('.docx');
+    createMenuButton(t('newWord'), async () => {
+      await onCreateNew('.docx');
     }),
   );
   menuPanel.appendChild(
-    createMenuButton(t('newExcel'), () => {
-      onCreateNew('.xlsx');
+    createMenuButton(t('newExcel'), async () => {
+      await onCreateNew('.xlsx');
     }),
   );
   menuPanel.appendChild(
-    createMenuButton(t('newPowerPoint'), () => {
-      onCreateNew('.pptx');
+    createMenuButton(t('newPowerPoint'), async () => {
+      await onCreateNew('.pptx');
     }),
   );
 

lib/loading.ts

@@ -10,9 +10,10 @@ export const showLoading = (): { removeLoading: () => void } => {
   `;
 
   const mask = document.createElement('div');
-  mask.setAttribute('class', 'w-full h-full fixed top-0 left-0 bg-black/30 flex items-center justify-center z-[5]');
+  mask.setAttribute('class', 'w-full h-full fixed top-0 left-0 bg-black/30 flex items-center justify-center');
   mask.style.cssText = `
     backdrop-filter: blur(2px);
+    z-index: 10000;
   `;
   mask.appendChild(loading);
   document.body.appendChild(mask);