fix(editor): loading style (#12537)

Closes: [BS-3555](https://linear.app/affine-design/issue/BS-3555/ui-attachment-loading-变量更新) Closes: [BS-3559](https://linear.app/affine-design/issue/BS-3559/ui-图片-loading-变量更新) ### Dark <img width="625" alt="Screenshot 2025-05-26 at 20 32 36" src="https://github.com/user-attachments/assets/93501e3d-8fc6-45f9-84a0-ac147e5c5f9f" /> ### Light <img width="623" alt="Screenshot 2025-05-26 at 20 32 25" src="https://github.com/user-attachments/assets/7d5bc128-6667-45b5-982d-dab3a22706a7" />  ## Summary by CodeRabbit - **New Features** - Loading icons are now invoked as functions, allowing for more flexible and customizable rendering with parameters like size and progress. - **Refactor** - Replaced theme-dependent and static loading icon references with a unified `LoadingIcon()` component across multiple components and blocks. - Removed legacy icon variants and simplified icon import statements, centralizing icon rendering logic. - **Style** - Updated styles for loading and reload buttons to use theme-aware CSS variables. - Enlarged and repositioned loading indicators in image blocks for better visibility. - **Bug Fixes** - Achieved consistent loading icon rendering across various blocks and components by standardizing icon invocation.
2026-02-27 19:02:23 +08:00 · 2025-05-27 05:10:27 +00:00
parent 1b715e588c
commit 9465d0dc73
27 changed files with 103 additions and 166 deletions
--- a/blocksuite/affine/blocks/attachment/src/attachment-block.ts
+++ b/blocksuite/affine/blocks/attachment/src/attachment-block.ts
@@ -4,7 +4,7 @@ import {
 } from '@blocksuite/affine-components/caption';
 import {
  getAttachmentFileIcon,
-  getLoadingIconWith,
+  LoadingIcon,
 } from '@blocksuite/affine-components/icons';
 import { Peekable } from '@blocksuite/affine-components/peek';
 import {
@@ -20,7 +20,6 @@ import {
  DocModeProvider,
  FileSizeLimitProvider,
  TelemetryProvider,
-  ThemeProvider,
 } from '@blocksuite/affine-shared/services';
 import { formatSize } from '@blocksuite/affine-shared/utils';
 import {
@@ -304,15 +303,12 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
  }

  protected resolvedState$ = computed<AttachmentResolvedStateInfo>(() => {
-    const theme = this.std.get(ThemeProvider).theme$.value;
-    const loadingIcon = getLoadingIconWith(theme);
-
    const size = this.model.props.size;
    const name = this.model.props.name$.value;
    const kind = getAttachmentFileIcon(name.split('.').pop() ?? '');

    const resolvedState = this.resourceController.resolveStateWith({
-      loadingIcon,
+      loadingIcon: LoadingIcon(),
      errorIcon: WarningIcon(),
      icon: AttachmentIcon(),
      title: name,
--- a/blocksuite/affine/blocks/attachment/src/styles.ts
+++ b/blocksuite/affine/blocks/attachment/src/styles.ts
@@ -47,11 +47,10 @@ export const styles = css`

  .affine-attachment-content-title-icon {
    display: flex;
-    width: 16px;
-    height: 16px;
    align-items: center;
    justify-content: center;
    color: var(--affine-text-primary-color);
+    font-size: 16px;
  }

  .affine-attachment-content-title-text {
@@ -107,7 +106,7 @@ export const styles = css`

  .affine-attachment-card.loading {
    .affine-attachment-content-title-text {
-      color: var(--affine-placeholder-color);
+      color: ${unsafeCSSVarV2('text/placeholder')};
    }
  }

--- a/blocksuite/affine/blocks/bookmark/src/components/bookmark-card.ts
+++ b/blocksuite/affine/blocks/bookmark/src/components/bookmark-card.ts
@@ -1,5 +1,5 @@
 import { getEmbedCardIcons } from '@blocksuite/affine-block-embed';
-import { WebIcon16 } from '@blocksuite/affine-components/icons';
+import { LoadingIcon, WebIcon16 } from '@blocksuite/affine-components/icons';
 import { ImageProxyService } from '@blocksuite/affine-shared/adapters';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import { getHostName } from '@blocksuite/affine-shared/utils';
@@ -60,11 +60,11 @@ export class BookmarkCard extends SignalWatcher(
        : title;

    const theme = this.bookmark.std.get(ThemeProvider).theme;
-    const { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons(theme);
+    const { EmbedCardBannerIcon } = getEmbedCardIcons(theme);
    const imageProxyService = this.bookmark.store.get(ImageProxyService);

    const titleIcon = this.loading
-      ? LoadingIcon
+      ? LoadingIcon()
      : icon
        ? html`<img src=${imageProxyService.buildUrl(icon)} alt="icon" />`
        : WebIcon16;
--- a/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/embed-linked-doc-block.ts
+++ b/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/embed-linked-doc-block.ts
@@ -3,6 +3,7 @@ import {
  RENDER_CARD_THROTTLE_MS,
 } from '@blocksuite/affine-block-embed';
 import { SurfaceBlockModel } from '@blocksuite/affine-block-surface';
+import { LoadingIcon } from '@blocksuite/affine-components/icons';
 import { isPeekable, Peekable } from '@blocksuite/affine-components/peek';
 import { RefNodeSlotsProvider } from '@blocksuite/affine-inline-reference';
 import type {
@@ -31,6 +32,7 @@ import {
  referenceToNode,
 } from '@blocksuite/affine-shared/utils';
 import { Bound } from '@blocksuite/global/gfx';
+import { ResetIcon } from '@blocksuite/icons/lit';
 import { BlockSelection } from '@blocksuite/std';
 import { Text } from '@blocksuite/store';
 import { computed } from '@preact/signals-core';
@@ -337,8 +339,6 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke

    const theme = this.std.get(ThemeProvider).theme;
    const {
-      LoadingIcon,
-      ReloadIcon,
      LinkedDocDeletedBanner,
      LinkedDocEmptyBanner,
      SyncedDocErrorBanner,
@@ -347,7 +347,7 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
    const icon = isError
      ? SyncedDocErrorIcon
      : isLoading
-        ? LoadingIcon
+        ? LoadingIcon()
        : this.icon$.value;
    const title = isLoading ? 'Loading...' : this.title$;
    const description = this.model.props.description$;
@@ -429,7 +429,7 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
                      class="affine-embed-linked-doc-card-content-reload-button"
                      @click=${this.refreshData}
                    >
-                      ${ReloadIcon} <span>Reload</span>
+                      ${ResetIcon()} <span>Reload</span>
                    </div>
                  </div>
                `
--- a/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/styles.ts
+++ b/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/styles.ts
@@ -124,11 +124,11 @@ export const styles = css`
    align-items: center;
    gap: 4px;
    cursor: pointer;
+    color: ${unsafeCSSVarV2('button/primary')};
  }
  .affine-embed-linked-doc-card-content-reload-button svg {
    width: 12px;
    height: 12px;
-    fill: var(--affine-background-primary-color);
  }
  .affine-embed-linked-doc-card-content-reload-button > span {
    display: -webkit-box;
@@ -138,7 +138,6 @@ export const styles = css`
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
-    color: var(--affine-brand-color);
    font-family: var(--affine-font-family);
    font-size: var(--affine-font-xs);
    font-style: normal;
--- a/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/utils.ts
+++ b/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/utils.ts
@@ -1,8 +1,6 @@
 import {
  EmbedEdgelessIcon,
  EmbedPageIcon,
-  getLoadingIconWith,
-  ReloadIcon,
 } from '@blocksuite/affine-components/icons';
 import {
  ColorScheme,
@@ -35,8 +33,6 @@ import {
 } from './styles.js';

 type EmbedCardImages = {
-  LoadingIcon: TemplateResult<1>;
-  ReloadIcon: TemplateResult<1>;
  LinkedDocIcon: TemplateResult<1>;
  LinkedDocDeletedIcon: TemplateResult<1>;
  LinkedDocEmptyBanner: TemplateResult<1>;
@@ -50,12 +46,9 @@ 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,
-        ReloadIcon,
        LinkedDocIcon: EmbedPageIcon,
        LinkedDocDeletedIcon,
        LinkedDocEmptyBanner: small
@@ -68,8 +61,6 @@ export function getEmbedLinkedDocIcons(
      };
    } else {
      return {
-        ReloadIcon,
-        LoadingIcon,
        LinkedDocIcon: EmbedPageIcon,
        LinkedDocDeletedIcon,
        LinkedDocEmptyBanner: small
@@ -84,8 +75,6 @@ export function getEmbedLinkedDocIcons(
  } else {
    if (theme === ColorScheme.Light) {
      return {
-        ReloadIcon,
-        LoadingIcon,
        LinkedDocIcon: EmbedEdgelessIcon,
        LinkedDocDeletedIcon,
        LinkedDocEmptyBanner: small
@@ -98,8 +87,6 @@ export function getEmbedLinkedDocIcons(
      };
    } else {
      return {
-        ReloadIcon,
-        LoadingIcon,
        LinkedDocIcon: EmbedEdgelessIcon,
        LinkedDocDeletedIcon,
        LinkedDocEmptyBanner: small
--- a/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/components/embed-synced-doc-card.ts
+++ b/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/components/embed-synced-doc-card.ts
@@ -1,6 +1,8 @@
 import { RENDER_CARD_THROTTLE_MS } from '@blocksuite/affine-block-embed';
+import { LoadingIcon } from '@blocksuite/affine-components/icons';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import { WithDisposable } from '@blocksuite/global/lit';
+import { ResetIcon } from '@blocksuite/icons/lit';
 import {
  BlockSelection,
  isGfxBlockComponent,
@@ -148,9 +150,7 @@ export class EmbedSyncedDocCard extends WithDisposable(ShadowlessElement) {

    const theme = this.std.get(ThemeProvider).theme;
    const {
-      LoadingIcon,
      SyncedDocErrorIcon,
-      ReloadIcon,
      SyncedDocEmptyBanner,
      SyncedDocErrorBanner,
      SyncedDocDeletedBanner,
@@ -159,7 +159,7 @@ export class EmbedSyncedDocCard extends WithDisposable(ShadowlessElement) {
    const icon = error
      ? SyncedDocErrorIcon
      : isLoading
-        ? LoadingIcon
+        ? LoadingIcon()
        : this.block.icon$.value;
    const title = isLoading ? 'Loading...' : this.block.title$;

@@ -216,7 +216,7 @@ export class EmbedSyncedDocCard extends WithDisposable(ShadowlessElement) {
                    class="affine-embed-synced-doc-card-content-reload-button"
                    @click=${() => this.block.refreshData()}
                  >
-                    ${ReloadIcon} <span>Reload</span>
+                    ${ResetIcon()} <span>Reload</span>
                  </div>
                </div>
              `
--- a/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/styles.ts
+++ b/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/styles.ts
@@ -303,11 +303,11 @@ export const cardStyles = css`
    align-items: center;
    gap: 4px;
    cursor: pointer;
+    color: ${unsafeCSSVarV2('button/primary')};
  }
  .affine-embed-synced-doc-card-content-reload-button svg {
    width: 12px;
    height: 12px;
-    fill: var(--affine-background-primary-color);
  }
  .affine-embed-synced-doc-card-content-reload-button > span {
    display: -webkit-box;
@@ -317,7 +317,6 @@ export const cardStyles = css`
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
-    color: var(--affine-brand-color);
    font-family: var(--affine-font-family);
    font-size: var(--affine-font-xs);
    font-style: normal;
--- a/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/utils.ts
+++ b/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/utils.ts
@@ -1,8 +1,6 @@
 import {
  EmbedEdgelessIcon,
  EmbedPageIcon,
-  getLoadingIconWith,
-  ReloadIcon,
 } from '@blocksuite/affine-components/icons';
 import { ColorScheme } from '@blocksuite/affine-model';
 import type { BlockComponent } from '@blocksuite/std';
@@ -21,11 +19,9 @@ import {
 } from './styles.js';

 type SyncedCardImages = {
-  LoadingIcon: TemplateResult<1>;
  SyncedDocIcon: TemplateResult<1>;
  SyncedDocErrorIcon: TemplateResult<1>;
  SyncedDocDeletedIcon: TemplateResult<1>;
-  ReloadIcon: TemplateResult<1>;
  SyncedDocEmptyBanner: TemplateResult<1>;
  SyncedDocErrorBanner: TemplateResult<1>;
  SyncedDocDeletedBanner: TemplateResult<1>;
@@ -35,25 +31,20 @@ export function getSyncedDocIcons(
  theme: ColorScheme,
  editorMode: 'page' | 'edgeless'
 ): SyncedCardImages {
-  const LoadingIcon = getLoadingIconWith(theme);
  if (theme === ColorScheme.Light) {
    return {
-      LoadingIcon,
      SyncedDocIcon: editorMode === 'page' ? EmbedPageIcon : EmbedEdgelessIcon,
      SyncedDocErrorIcon,
      SyncedDocDeletedIcon,
-      ReloadIcon,
      SyncedDocEmptyBanner: LightSyncedDocEmptyBanner,
      SyncedDocErrorBanner: LightSyncedDocErrorBanner,
      SyncedDocDeletedBanner: LightSyncedDocDeletedBanner,
    };
  } else {
    return {
-      LoadingIcon,
      SyncedDocIcon: editorMode === 'page' ? EmbedPageIcon : EmbedEdgelessIcon,
      SyncedDocErrorIcon,
      SyncedDocDeletedIcon,
-      ReloadIcon,
      SyncedDocEmptyBanner: DarkSyncedDocEmptyBanner,
      SyncedDocErrorBanner: DarkSyncedDocErrorBanner,
      SyncedDocDeletedBanner: DarkSyncedDocDeletedBanner,
--- a/blocksuite/affine/blocks/embed/src/common/utils.ts
+++ b/blocksuite/affine/blocks/embed/src/common/utils.ts
@@ -9,13 +9,11 @@ import {
  EmbedCardLightHorizontalIcon,
  EmbedCardLightListIcon,
  EmbedCardLightVerticalIcon,
-  getLoadingIconWith,
 } from '@blocksuite/affine-components/icons';
 import { ColorScheme } from '@blocksuite/affine-model';
 import type { TemplateResult } from 'lit';

 type EmbedCardIcons = {
-  LoadingIcon: TemplateResult<1>;
  EmbedCardBannerIcon: TemplateResult<1>;
  EmbedCardHorizontalIcon: TemplateResult<1>;
  EmbedCardListIcon: TemplateResult<1>;
@@ -24,11 +22,8 @@ type EmbedCardIcons = {
 };

 export function getEmbedCardIcons(theme: ColorScheme): EmbedCardIcons {
-  const LoadingIcon = getLoadingIconWith(theme);
-
  if (theme === ColorScheme.Light) {
    return {
-      LoadingIcon,
      EmbedCardBannerIcon: EmbedCardLightBannerIcon,
      EmbedCardHorizontalIcon: EmbedCardLightHorizontalIcon,
      EmbedCardListIcon: EmbedCardLightListIcon,
@@ -37,7 +32,6 @@ export function getEmbedCardIcons(theme: ColorScheme): EmbedCardIcons {
    };
  } else {
    return {
-      LoadingIcon,
      EmbedCardBannerIcon: EmbedCardDarkBannerIcon,
      EmbedCardHorizontalIcon: EmbedCardDarkHorizontalIcon,
      EmbedCardListIcon: EmbedCardDarkListIcon,
--- a/blocksuite/affine/blocks/embed/src/embed-github-block/embed-github-block.ts
+++ b/blocksuite/affine/blocks/embed/src/embed-github-block/embed-github-block.ts
@@ -1,4 +1,4 @@
-import { OpenIcon } from '@blocksuite/affine-components/icons';
+import { LoadingIcon, OpenIcon } from '@blocksuite/affine-components/icons';
 import type {
  EmbedGithubModel,
  EmbedGithubStyles,
@@ -133,8 +133,8 @@ export class EmbedGithubBlockComponent extends EmbedBlockComponent<
    const loading = this.loading;
    const theme = this.std.get(ThemeProvider).theme;
    const imageProxyService = this.store.get(ImageProxyService);
-    const { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons(theme);
-    const titleIcon = loading ? LoadingIcon : GithubIcon;
+    const { EmbedCardBannerIcon } = getEmbedCardIcons(theme);
+    const titleIcon = loading ? LoadingIcon() : GithubIcon;
    const statusIcon = status
      ? getGithubStatusIcon(githubType, status, statusReason)
      : nothing;
--- a/blocksuite/affine/blocks/embed/src/embed-iframe-block/components/embed-iframe-loading-card.ts
+++ b/blocksuite/affine/blocks/embed/src/embed-iframe-block/components/embed-iframe-loading-card.ts
@@ -1,4 +1,4 @@
-import { ThemeProvider } from '@blocksuite/affine-shared/services';
+import { LoadingIcon } from '@blocksuite/affine-components/icons';
 import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { EmbedIcon } from '@blocksuite/icons/lit';
 import { type BlockStdScope } from '@blocksuite/std';
@@ -7,7 +7,6 @@ import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';

-import { getEmbedCardIcons } from '../../common/utils';
 import { LOADING_CARD_DEFAULT_HEIGHT } from '../consts';
 import type { EmbedIframeStatusCardOptions } from '../types';

@@ -156,9 +155,6 @@ export class EmbedIframeLoadingCard extends LitElement {
  `;

  override render() {
-    const theme = this.std.get(ThemeProvider).theme;
-    const { LoadingIcon } = getEmbedCardIcons(theme);
-
    const { layout, width, height } = this.options;
    const cardClasses = classMap({
      'affine-embed-iframe-loading-card': true,
@@ -176,7 +172,7 @@ export class EmbedIframeLoadingCard extends LitElement {
    return html`
      <div class=${cardClasses} style=${cardStyle}>
        <div class="loading-content">
-          <div class="loading-spinner">${LoadingIcon}</div>
+          <div class="loading-spinner">${LoadingIcon()}</div>
          <div class="loading-text">Loading...</div>
        </div>
        <div class="loading-banner">
--- a/blocksuite/affine/blocks/embed/src/embed-loom-block/embed-loom-block.ts
+++ b/blocksuite/affine/blocks/embed/src/embed-loom-block/embed-loom-block.ts
@@ -1,4 +1,4 @@
-import { OpenIcon } from '@blocksuite/affine-components/icons';
+import { LoadingIcon, OpenIcon } from '@blocksuite/affine-components/icons';
 import type { EmbedLoomModel, EmbedLoomStyles } from '@blocksuite/affine-model';
 import { ImageProxyService } from '@blocksuite/affine-shared/adapters';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
@@ -94,8 +94,8 @@ export class EmbedLoomBlockComponent extends EmbedBlockComponent<
    const loading = this.loading;
    const theme = this.std.get(ThemeProvider).theme;
    const imageProxyService = this.store.get(ImageProxyService);
-    const { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons(theme);
-    const titleIcon = loading ? LoadingIcon : LoomIcon;
+    const { EmbedCardBannerIcon } = getEmbedCardIcons(theme);
+    const titleIcon = loading ? LoadingIcon() : LoomIcon;
    const titleText = loading ? 'Loading...' : title;
    const descriptionText = loading ? '' : description;
    const bannerImage =
--- a/blocksuite/affine/blocks/embed/src/embed-youtube-block/embed-youtube-block.ts
+++ b/blocksuite/affine/blocks/embed/src/embed-youtube-block/embed-youtube-block.ts
@@ -1,4 +1,4 @@
-import { OpenIcon } from '@blocksuite/affine-components/icons';
+import { LoadingIcon, OpenIcon } from '@blocksuite/affine-components/icons';
 import type {
  EmbedYoutubeModel,
  EmbedYoutubeStyles,
@@ -108,8 +108,8 @@ export class EmbedYoutubeBlockComponent extends EmbedBlockComponent<
    const loading = this.loading;
    const theme = this.std.get(ThemeProvider).theme;
    const imageProxyService = this.store.get(ImageProxyService);
-    const { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons(theme);
-    const titleIcon = loading ? LoadingIcon : YoutubeIcon;
+    const { EmbedCardBannerIcon } = getEmbedCardIcons(theme);
+    const titleIcon = loading ? LoadingIcon() : YoutubeIcon;
    const titleText = loading ? 'Loading...' : title;
    const descriptionText = loading ? null : description;
    const bannerImage =
--- a/blocksuite/affine/blocks/image/src/components/page-image-block.ts
+++ b/blocksuite/affine/blocks/image/src/components/page-image-block.ts
@@ -46,12 +46,16 @@ export class ImageBlockPageComponent extends SignalWatcher(
      justify-content: center;
      position: absolute;
      top: 4px;
-      right: 4px;
-      width: 20px;
-      height: 20px;
-      padding: 4px;
-      border-radius: 4px;
+      left: 4px;
+      width: 36px;
+      height: 36px;
+      padding: 5px;
+      border-radius: 8px;
      background: ${unsafeCSSVarV2('loading/backgroundLayer')};
+
+      & > svg {
+        font-size: 25.71px;
+      }
    }

    affine-page-image .affine-image-status {
--- a/blocksuite/affine/blocks/image/src/image-block.ts
+++ b/blocksuite/affine/blocks/image/src/image-block.ts
@@ -1,19 +1,17 @@
 import { CaptionedBlockComponent } from '@blocksuite/affine-components/caption';
 import { whenHover } from '@blocksuite/affine-components/hover';
-import { getLoadingIconWith } from '@blocksuite/affine-components/icons';
+import { LoadingIcon } from '@blocksuite/affine-components/icons';
 import { Peekable } from '@blocksuite/affine-components/peek';
 import { ResourceController } from '@blocksuite/affine-components/resource';
 import type { ImageBlockModel } from '@blocksuite/affine-model';
 import { ImageSelection } from '@blocksuite/affine-shared/selection';
-import {
-  ThemeProvider,
-  ToolbarRegistryIdentifier,
-} from '@blocksuite/affine-shared/services';
+import { ToolbarRegistryIdentifier } from '@blocksuite/affine-shared/services';
 import { formatSize } from '@blocksuite/affine-shared/utils';
 import { IS_MOBILE } from '@blocksuite/global/env';
 import { BrokenImageIcon, ImageIcon } from '@blocksuite/icons/lit';
 import { BlockSelection } from '@blocksuite/std';
 import { computed } from '@preact/signals-core';
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { html } from 'lit';
 import { query } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -126,9 +124,6 @@ export class ImageBlockComponent extends CaptionedBlockComponent<ImageBlockModel
  }

  override renderBlock() {
-    const theme = this.std.get(ThemeProvider).theme$.value;
-    const loadingIcon = getLoadingIconWith(theme);
-
    const blobUrl = this.blobUrl;
    const { size = 0 } = this.model.props;

@@ -138,7 +133,9 @@ export class ImageBlockComponent extends CaptionedBlockComponent<ImageBlockModel
    });

    const resovledState = this.resourceController.resolveStateWith({
-      loadingIcon,
+      loadingIcon: LoadingIcon({
+        strokeColor: cssVarV2('button/pureWhiteText'),
+      }),
      errorIcon: BrokenImageIcon(),
      icon: ImageIcon(),
      title: 'Image',
--- a/blocksuite/affine/blocks/image/src/image-edgeless-block.ts
+++ b/blocksuite/affine/blocks/image/src/image-edgeless-block.ts
@@ -1,13 +1,12 @@
 import type { BlockCaptionEditor } from '@blocksuite/affine-components/caption';
-import { getLoadingIconWith } from '@blocksuite/affine-components/icons';
+import { LoadingIcon } from '@blocksuite/affine-components/icons';
 import { Peekable } from '@blocksuite/affine-components/peek';
 import { ResourceController } from '@blocksuite/affine-components/resource';
 import {
  type ImageBlockModel,
  ImageBlockSchema,
 } from '@blocksuite/affine-model';
-import { ThemeProvider } from '@blocksuite/affine-shared/services';
-import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
+import { cssVarV2, unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { formatSize } from '@blocksuite/affine-shared/utils';
 import { BrokenImageIcon, ImageIcon } from '@blocksuite/icons/lit';
 import { GfxBlockComponent } from '@blocksuite/std';
@@ -39,11 +38,15 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod
      position: absolute;
      top: 4px;
      right: 4px;
-      width: 20px;
-      height: 20px;
-      padding: 4px;
-      border-radius: 4px;
+      width: 36px;
+      height: 36px;
+      padding: 5px;
+      border-radius: 8px;
      background: ${unsafeCSSVarV2('loading/backgroundLayer')};
+
+      & > svg {
+        font-size: 25.71px;
+      }
    }

    affine-edgeless-image .affine-image-status {
@@ -108,9 +111,6 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod
  }

  override renderGfxBlock() {
-    const theme = this.std.get(ThemeProvider).theme$.value;
-    const loadingIcon = getLoadingIconWith(theme);
-
    const blobUrl = this.blobUrl;
    const { rotate = 0, size = 0, caption = 'Image' } = this.model.props;

@@ -124,7 +124,9 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod
    });

    const resovledState = this.resourceController.resolveStateWith({
-      loadingIcon,
+      loadingIcon: LoadingIcon({
+        strokeColor: cssVarV2('button/pureWhiteText'),
+      }),
      errorIcon: BrokenImageIcon(),
      icon: ImageIcon(),
      title: 'Image',
@@ -148,7 +150,7 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod
            </div>
            ${when(
              resovledState.loading,
-              () => html`<div class="loading">${loadingIcon}</div>`
+              () => html`<div class="loading">${resovledState.icon}</div>`
            )}
            ${when(
              resovledState.error && resovledState.description,