From 539b2e87adbb5a38a653c0f97cb28d5d77c99afc Mon Sep 17 00:00:00 2001
From: fundon <fundon@pindash.io>
Date: Wed, 30 Apr 2025 06:36:22 +0000
Subject: [PATCH] refactor(editor): get loading icon with theme (#12079)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced a unified loading spinner icon that adapts to light or dark themes automatically.

- **Refactor**
  - Streamlined loading icon usage across the app by replacing multiple theme-based icons with a single helper function for consistent and simplified icon management.

- **Chores**
  - Removed an unused dependency to improve package management.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../affine/blocks/attachment/package.json     |  1 -
 .../blocks/attachment/src/attachment-block.ts | 10 +++--
 .../affine/blocks/attachment/tsconfig.json    |  1 -
 .../affine/blocks/embed/src/common/utils.ts   |  9 +++--
 .../embed/src/embed-linked-doc-block/utils.ts | 12 +++---
 .../embed/src/embed-synced-doc-block/utils.ts |  8 ++--
 .../affine/components/src/icons/index.ts      |  1 +
 .../affine/components/src/icons/loading.ts    | 40 +++++++++++++++++++
 .../affine/components/src/icons/text.ts       | 35 ----------------
 .../src/footnote-node/footnote-popup.ts       |  7 ++--
 .../components/generating-placeholder.ts      | 14 ++-----
 .../i18n/src/i18n-completenesses.json         |  2 +-
 tools/utils/src/workspace.gen.ts              |  1 -
 yarn.lock                                     |  1 -
 14 files changed, 70 insertions(+), 72 deletions(-)
 create mode 100644 blocksuite/affine/components/src/icons/loading.ts

diff --git a/blocksuite/affine/blocks/attachment/package.json b/blocksuite/affine/blocks/attachment/package.json
index 7a3f5ab8aa..5b379a9a50 100644
--- a/blocksuite/affine/blocks/attachment/package.json
+++ b/blocksuite/affine/blocks/attachment/package.json
@@ -10,7 +10,6 @@
   "author": "toeverything",
   "license": "MIT",
   "dependencies": {
-    "@blocksuite/affine-block-embed": "workspace:*",
     "@blocksuite/affine-block-surface": "workspace:*",
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-ext-loader": "workspace:*",
diff --git a/blocksuite/affine/blocks/attachment/src/attachment-block.ts b/blocksuite/affine/blocks/attachment/src/attachment-block.ts
index adba0a6d96..53e1f3b85a 100644
--- a/blocksuite/affine/blocks/attachment/src/attachment-block.ts
+++ b/blocksuite/affine/blocks/attachment/src/attachment-block.ts
@@ -1,9 +1,11 @@
-import { getEmbedCardIcons } from '@blocksuite/affine-block-embed';
 import {
   CaptionedBlockComponent,
   SelectedStyle,
 } from '@blocksuite/affine-components/caption';
-import { getAttachmentFileIcon } from '@blocksuite/affine-components/icons';
+import {
+  getAttachmentFileIcon,
+  getLoadingIconWith,
+} from '@blocksuite/affine-components/icons';
 import { Peekable } from '@blocksuite/affine-components/peek';
 import { toast } from '@blocksuite/affine-components/toast';
 import {
@@ -297,7 +299,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
     const cardStyle = style ?? AttachmentBlockStyles[1];
 
     const theme = this.std.get(ThemeProvider).theme$.value;
-    const { LoadingIcon } = getEmbedCardIcons(theme);
+    const loadingIcon = getLoadingIconWith(theme);
 
     const blobState = this.blobState$.value;
     const {
@@ -319,7 +321,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
     };
 
     const icon = loading
-      ? LoadingIcon
+      ? loadingIcon
       : error
         ? WarningIcon()
         : AttachmentIcon();
diff --git a/blocksuite/affine/blocks/attachment/tsconfig.json b/blocksuite/affine/blocks/attachment/tsconfig.json
index 26feddf392..d5d90342e1 100644
--- a/blocksuite/affine/blocks/attachment/tsconfig.json
+++ b/blocksuite/affine/blocks/attachment/tsconfig.json
@@ -7,7 +7,6 @@
   },
   "include": ["./src"],
   "references": [
-    { "path": "../embed" },
     { "path": "../surface" },
     { "path": "../../components" },
     { "path": "../../ext-loader" },
diff --git a/blocksuite/affine/blocks/embed/src/common/utils.ts b/blocksuite/affine/blocks/embed/src/common/utils.ts
index 6e317bf71f..9e8cef4818 100644
--- a/blocksuite/affine/blocks/embed/src/common/utils.ts
+++ b/blocksuite/affine/blocks/embed/src/common/utils.ts
@@ -1,5 +1,4 @@
 import {
-  DarkLoadingIcon,
   EmbedCardDarkBannerIcon,
   EmbedCardDarkCubeIcon,
   EmbedCardDarkHorizontalIcon,
@@ -10,7 +9,7 @@ import {
   EmbedCardLightHorizontalIcon,
   EmbedCardLightListIcon,
   EmbedCardLightVerticalIcon,
-  LightLoadingIcon,
+  getLoadingIconWith,
 } from '@blocksuite/affine-components/icons';
 import { ColorScheme } from '@blocksuite/affine-model';
 import type { TemplateResult } from 'lit';
@@ -25,9 +24,11 @@ type EmbedCardIcons = {
 };
 
 export function getEmbedCardIcons(theme: ColorScheme): EmbedCardIcons {
+  const LoadingIcon = getLoadingIconWith(theme);
+
   if (theme === ColorScheme.Light) {
     return {
-      LoadingIcon: LightLoadingIcon,
+      LoadingIcon,
       EmbedCardBannerIcon: EmbedCardLightBannerIcon,
       EmbedCardHorizontalIcon: EmbedCardLightHorizontalIcon,
       EmbedCardListIcon: EmbedCardLightListIcon,
@@ -36,7 +37,7 @@ export function getEmbedCardIcons(theme: ColorScheme): EmbedCardIcons {
     };
   } else {
     return {
-      LoadingIcon: DarkLoadingIcon,
+      LoadingIcon,
       EmbedCardBannerIcon: EmbedCardDarkBannerIcon,
       EmbedCardHorizontalIcon: EmbedCardDarkHorizontalIcon,
       EmbedCardListIcon: EmbedCardDarkListIcon,
diff --git a/blocksuite/affine/blocks/embed/src/embed-linked-doc-block/utils.ts b/blocksuite/affine/blocks/embed/src/embed-linked-doc-block/utils.ts
index c489fd5afd..d7d01846d1 100644
--- a/blocksuite/affine/blocks/embed/src/embed-linked-doc-block/utils.ts
+++ b/blocksuite/affine/blocks/embed/src/embed-linked-doc-block/utils.ts
@@ -1,8 +1,7 @@
 import {
-  DarkLoadingIcon,
   EmbedEdgelessIcon,
   EmbedPageIcon,
-  LightLoadingIcon,
+  getLoadingIconWith,
   ReloadIcon,
 } from '@blocksuite/affine-components/icons';
 import {
@@ -51,10 +50,11 @@ export function getEmbedLinkedDocIcons(
   style: (typeof EmbedLinkedDocStyles)[number]
 ): EmbedCardImages {
   const small = style !== 'vertical';
+  const LoadingIcon = getLoadingIconWith(theme);
   if (editorMode === 'page') {
     if (theme === ColorScheme.Light) {
       return {
-        LoadingIcon: LightLoadingIcon,
+        LoadingIcon,
         ReloadIcon,
         LinkedDocIcon: EmbedPageIcon,
         LinkedDocDeletedIcon,
@@ -69,7 +69,7 @@ export function getEmbedLinkedDocIcons(
     } else {
       return {
         ReloadIcon,
-        LoadingIcon: DarkLoadingIcon,
+        LoadingIcon,
         LinkedDocIcon: EmbedPageIcon,
         LinkedDocDeletedIcon,
         LinkedDocEmptyBanner: small
@@ -85,7 +85,7 @@ export function getEmbedLinkedDocIcons(
     if (theme === ColorScheme.Light) {
       return {
         ReloadIcon,
-        LoadingIcon: LightLoadingIcon,
+        LoadingIcon,
         LinkedDocIcon: EmbedEdgelessIcon,
         LinkedDocDeletedIcon,
         LinkedDocEmptyBanner: small
@@ -99,7 +99,7 @@ export function getEmbedLinkedDocIcons(
     } else {
       return {
         ReloadIcon,
-        LoadingIcon: DarkLoadingIcon,
+        LoadingIcon,
         LinkedDocIcon: EmbedEdgelessIcon,
         LinkedDocDeletedIcon,
         LinkedDocEmptyBanner: small
diff --git a/blocksuite/affine/blocks/embed/src/embed-synced-doc-block/utils.ts b/blocksuite/affine/blocks/embed/src/embed-synced-doc-block/utils.ts
index 2e05356428..8b17bbd11a 100644
--- a/blocksuite/affine/blocks/embed/src/embed-synced-doc-block/utils.ts
+++ b/blocksuite/affine/blocks/embed/src/embed-synced-doc-block/utils.ts
@@ -1,8 +1,7 @@
 import {
-  DarkLoadingIcon,
   EmbedEdgelessIcon,
   EmbedPageIcon,
-  LightLoadingIcon,
+  getLoadingIconWith,
   ReloadIcon,
 } from '@blocksuite/affine-components/icons';
 import { ColorScheme } from '@blocksuite/affine-model';
@@ -34,9 +33,10 @@ export function getSyncedDocIcons(
   theme: ColorScheme,
   editorMode: 'page' | 'edgeless'
 ): SyncedCardImages {
+  const LoadingIcon = getLoadingIconWith(theme);
   if (theme === ColorScheme.Light) {
     return {
-      LoadingIcon: LightLoadingIcon,
+      LoadingIcon,
       SyncedDocIcon: editorMode === 'page' ? EmbedPageIcon : EmbedEdgelessIcon,
       SyncedDocErrorIcon,
       SyncedDocDeletedIcon,
@@ -47,7 +47,7 @@ export function getSyncedDocIcons(
     };
   } else {
     return {
-      LoadingIcon: DarkLoadingIcon,
+      LoadingIcon,
       SyncedDocIcon: editorMode === 'page' ? EmbedPageIcon : EmbedEdgelessIcon,
       SyncedDocErrorIcon,
       SyncedDocDeletedIcon,
diff --git a/blocksuite/affine/components/src/icons/index.ts b/blocksuite/affine/components/src/icons/index.ts
index 77ce937830..b08a7a2e4d 100644
--- a/blocksuite/affine/components/src/icons/index.ts
+++ b/blocksuite/affine/components/src/icons/index.ts
@@ -2,6 +2,7 @@ export * from './ai.js';
 export * from './file-icons.js';
 export * from './import-export.js';
 export * from './list.js';
+export * from './loading.js';
 export * from './misc.js';
 export * from './tags.js';
 export * from './text.js';
diff --git a/blocksuite/affine/components/src/icons/loading.ts b/blocksuite/affine/components/src/icons/loading.ts
new file mode 100644
index 0000000000..6b7590e87a
--- /dev/null
+++ b/blocksuite/affine/components/src/icons/loading.ts
@@ -0,0 +1,40 @@
+import { ColorScheme } from '@blocksuite/affine-model';
+import { html } from 'lit';
+
+const LoadingIcon = (color: string) => {
+  return html`<svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <style xmlns="http://www.w3.org/2000/svg">
+      .spinner {
+        transform-origin: center;
+        animation: spinner_animate 0.75s infinite linear;
+      }
+      @keyframes spinner_animate {
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+    </style>
+    <path
+      d="M14.6666 8.00004C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00004C1.33325 4.31814 4.31802 1.33337 7.99992 1.33337C11.6818 1.33337 14.6666 4.31814 14.6666 8.00004ZM3.30003 8.00004C3.30003 10.5957 5.40424 12.6999 7.99992 12.6999C10.5956 12.6999 12.6998 10.5957 12.6998 8.00004C12.6998 5.40436 10.5956 3.30015 7.99992 3.30015C5.40424 3.30015 3.30003 5.40436 3.30003 8.00004Z"
+      fill=${color}
+      fill-opacity="0.1"
+    />
+    <path
+      d="M13.6833 8.00004C14.2263 8.00004 14.674 7.55745 14.5942 7.02026C14.5142 6.48183 14.3684 5.954 14.1591 5.44882C13.8241 4.63998 13.333 3.90505 12.714 3.286C12.0949 2.66694 11.36 2.17588 10.5511 1.84084C10.046 1.63159 9.51812 1.48576 8.9797 1.40576C8.44251 1.32595 7.99992 1.77363 7.99992 2.31671C7.99992 2.85979 8.44486 3.28974 8.9761 3.40253C9.25681 3.46214 9.53214 3.54746 9.79853 3.65781C10.3688 3.894 10.8869 4.2402 11.3233 4.67664C11.7598 5.11307 12.106 5.6312 12.3422 6.20143C12.4525 6.46782 12.5378 6.74315 12.5974 7.02386C12.7102 7.5551 13.1402 8.00004 13.6833 8.00004Z"
+      fill="#1C9EE4"
+      class="spinner"
+    />
+  </svg>`;
+};
+
+export const LightLoadingIcon = LoadingIcon('white');
+
+export const DarkLoadingIcon = LoadingIcon('black');
+
+export const getLoadingIconWith = (theme: ColorScheme) =>
+  theme === ColorScheme.Light ? LightLoadingIcon : DarkLoadingIcon;
diff --git a/blocksuite/affine/components/src/icons/text.ts b/blocksuite/affine/components/src/icons/text.ts
index fee39e592b..8c218badb3 100644
--- a/blocksuite/affine/components/src/icons/text.ts
+++ b/blocksuite/affine/components/src/icons/text.ts
@@ -443,41 +443,6 @@ export const PaletteIcon = icons.PaletteIcon({
   height: '20',
 });
 
-const LoadingIcon = (color: string) => {
-  return html`<svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <style xmlns="http://www.w3.org/2000/svg">
-      .spinner {
-        transform-origin: center;
-        animation: spinner_animate 0.75s infinite linear;
-      }
-      @keyframes spinner_animate {
-        100% {
-          transform: rotate(360deg);
-        }
-      }
-    </style>
-    <path
-      d="M14.6666 8.00004C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00004C1.33325 4.31814 4.31802 1.33337 7.99992 1.33337C11.6818 1.33337 14.6666 4.31814 14.6666 8.00004ZM3.30003 8.00004C3.30003 10.5957 5.40424 12.6999 7.99992 12.6999C10.5956 12.6999 12.6998 10.5957 12.6998 8.00004C12.6998 5.40436 10.5956 3.30015 7.99992 3.30015C5.40424 3.30015 3.30003 5.40436 3.30003 8.00004Z"
-      fill=${color}
-      fill-opacity="0.1"
-    />
-    <path
-      d="M13.6833 8.00004C14.2263 8.00004 14.674 7.55745 14.5942 7.02026C14.5142 6.48183 14.3684 5.954 14.1591 5.44882C13.8241 4.63998 13.333 3.90505 12.714 3.286C12.0949 2.66694 11.36 2.17588 10.5511 1.84084C10.046 1.63159 9.51812 1.48576 8.9797 1.40576C8.44251 1.32595 7.99992 1.77363 7.99992 2.31671C7.99992 2.85979 8.44486 3.28974 8.9761 3.40253C9.25681 3.46214 9.53214 3.54746 9.79853 3.65781C10.3688 3.894 10.8869 4.2402 11.3233 4.67664C11.7598 5.11307 12.106 5.6312 12.3422 6.20143C12.4525 6.46782 12.5378 6.74315 12.5974 7.02386C12.7102 7.5551 13.1402 8.00004 13.6833 8.00004Z"
-      fill="#1C9EE4"
-      class="spinner"
-    />
-  </svg>`;
-};
-
-export const LightLoadingIcon = LoadingIcon('white');
-
-export const DarkLoadingIcon = LoadingIcon('black');
-
 export const EmbedCardLightBannerIcon = html`<svg
   width="340"
   height="170"
diff --git a/blocksuite/affine/inlines/footnote/src/footnote-node/footnote-popup.ts b/blocksuite/affine/inlines/footnote/src/footnote-node/footnote-popup.ts
index bf351cdc70..8c7d3825a0 100644
--- a/blocksuite/affine/inlines/footnote/src/footnote-node/footnote-popup.ts
+++ b/blocksuite/affine/inlines/footnote/src/footnote-node/footnote-popup.ts
@@ -1,10 +1,9 @@
 import {
-  DarkLoadingIcon,
   getAttachmentFileIcon,
-  LightLoadingIcon,
+  getLoadingIconWith,
   WebIcon16,
 } from '@blocksuite/affine-components/icons';
-import { ColorScheme, type FootNote } from '@blocksuite/affine-model';
+import type { FootNote } from '@blocksuite/affine-model';
 import {
   DocDisplayMetaProvider,
   LinkPreviewerService,
@@ -125,7 +124,7 @@ export class FootNotePopup extends SignalWatcher(WithDisposable(LitElement)) {
 
   private readonly _LoadingIcon = () => {
     const theme = this.std.get(ThemeProvider).theme;
-    return theme === ColorScheme.Light ? LightLoadingIcon : DarkLoadingIcon;
+    return getLoadingIconWith(theme);
   };
 
   private readonly _onClick = () => {
diff --git a/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/components/generating-placeholder.ts b/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/components/generating-placeholder.ts
index bae797fe51..16c30ffe4e 100644
--- a/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/components/generating-placeholder.ts
+++ b/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/components/generating-placeholder.ts
@@ -1,9 +1,6 @@
-import {
-  DarkLoadingIcon,
-  LightLoadingIcon,
-} from '@blocksuite/affine/components/icons';
+import { getLoadingIconWith } from '@blocksuite/affine/components/icons';
 import { WithDisposable } from '@blocksuite/affine/global/lit';
-import { ColorScheme } from '@blocksuite/affine/model';
+import type { ColorScheme } from '@blocksuite/affine/model';
 import { unsafeCSSVar } from '@blocksuite/affine/shared/theme';
 import { baseTheme } from '@toeverything/theme';
 import {
@@ -91,6 +88,7 @@ export class GeneratingPlaceholder extends WithDisposable(LitElement) {
 
   protected override render() {
     const loadingText = this.stages[this.loadingProgress - 1] || '';
+    const loadingIcon = getLoadingIconWith(this.theme);
 
     return html`<style>
         .generating-body {
@@ -101,11 +99,7 @@ export class GeneratingPlaceholder extends WithDisposable(LitElement) {
         ? html`<div class="generating-header">Answer</div>`
         : nothing}
       <div class="generating-body">
-        <div class="generating-icon">
-          ${this.theme === ColorScheme.Light
-            ? DarkLoadingIcon
-            : LightLoadingIcon}
-        </div>
+        <div class="generating-icon">${loadingIcon}</div>
         <div class="loading-progress">
           <div class="loading-text">${loadingText}</div>
           <div class="loading-stage">
diff --git a/packages/frontend/i18n/src/i18n-completenesses.json b/packages/frontend/i18n/src/i18n-completenesses.json
index e88fc0ba34..c3443254c2 100644
--- a/packages/frontend/i18n/src/i18n-completenesses.json
+++ b/packages/frontend/i18n/src/i18n-completenesses.json
@@ -5,7 +5,7 @@
   "de": 98,
   "el-GR": 98,
   "en": 100,
-  "es-AR": 99,
+  "es-AR": 98,
   "es-CL": 100,
   "es": 98,
   "fa": 98,
diff --git a/tools/utils/src/workspace.gen.ts b/tools/utils/src/workspace.gen.ts
index 88d69114ae..47d036553d 100644
--- a/tools/utils/src/workspace.gen.ts
+++ b/tools/utils/src/workspace.gen.ts
@@ -74,7 +74,6 @@ export const PackageList = [
     location: 'blocksuite/affine/blocks/attachment',
     name: '@blocksuite/affine-block-attachment',
     workspaceDependencies: [
-      'blocksuite/affine/blocks/embed',
       'blocksuite/affine/blocks/surface',
       'blocksuite/affine/components',
       'blocksuite/affine/ext-loader',
diff --git a/yarn.lock b/yarn.lock
index 7e87938581..e011e41897 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2407,7 +2407,6 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@blocksuite/affine-block-attachment@workspace:blocksuite/affine/blocks/attachment"
   dependencies:
-    "@blocksuite/affine-block-embed": "workspace:*"
     "@blocksuite/affine-block-surface": "workspace:*"
     "@blocksuite/affine-components": "workspace:*"
     "@blocksuite/affine-ext-loader": "workspace:*"