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 -->

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:*",

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();

blocksuite/affine/blocks/attachment/tsconfig.json

@@ -7,7 +7,6 @@
   },
   "include": ["./src"],
   "references": [
-    { "path": "../embed" },
     { "path": "../surface" },
     { "path": "../../components" },
     { "path": "../../ext-loader" },

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,

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

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,

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';

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;

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"

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 = () => {

packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/components/generating-placeholder.ts

@@ -1,9 +1,6 @@
-import {
+import { getLoadingIconWith } from '@blocksuite/affine/components/icons';
-  DarkLoadingIcon,
-  LightLoadingIcon,
-} 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">
+        <div class="generating-icon">${loadingIcon}</div>
-          ${this.theme === ColorScheme.Light
-            ? DarkLoadingIcon
-            : LightLoadingIcon}
-        </div>
         <div class="loading-progress">
           <div class="loading-text">${loadingText}</div>
           <div class="loading-stage">

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,

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',

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:*"