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

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## 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.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/core/src/blocksuite/ai/actions/edgeless-response.ts

@@ -1,7 +1,7 @@
 import { CodeBlockPreviewIdentifier } from '@blocksuite/affine/blocks/code';
 import { addImages } from '@blocksuite/affine/blocks/image';
 import { getSurfaceBlock } from '@blocksuite/affine/blocks/surface';
-import { LightLoadingIcon } from '@blocksuite/affine/components/icons';
+import { LoadingIcon } from '@blocksuite/affine/components/icons';
 import { addTree } from '@blocksuite/affine/gfx/mindmap';
 import { fitContent } from '@blocksuite/affine/gfx/shape';
 import { createTemplateJob } from '@blocksuite/affine/gfx/template';
@@ -123,7 +123,7 @@ export function createInsertItems<T extends keyof BlockSuitePresets.AIActions>(
     {
       name: `${buttonText} - Loading...`,
       icon: html`<div style=${styleMap({ height: '20px', width: '20px' })}>
-        ${LightLoadingIcon}
+        ${LoadingIcon()}
       </div>`,
       testId: 'answer-insert-below-loading',
       showWhen: () => {

packages/frontend/core/src/blocksuite/ai/blocks/ai-chat-block/components/chat-images.ts

@@ -1,4 +1,4 @@
-import { LightLoadingIcon } from '@blocksuite/affine/components/icons';
+import { LoadingIcon } from '@blocksuite/affine/components/icons';
 import { css, html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { choose } from 'lit/directives/choose.js';
@@ -35,7 +35,7 @@ export class ChatImage extends LitElement {
         () =>
           html`<image-placeholder
             .text=${'Loading image'}
-            .icon=${LightLoadingIcon}
+            .icon=${LoadingIcon()}
           ></image-placeholder>`,
       ],
       [

packages/frontend/core/src/blocksuite/ai/components/ai-chat-chips/utils.ts

@@ -1,4 +1,4 @@
-import { LightLoadingIcon } from '@blocksuite/affine/components/icons';
+import { LoadingIcon } from '@blocksuite/affine/components/icons';
 import { WarningIcon } from '@blocksuite/icons/lit';
 import { type TemplateResult } from 'lit';
 
@@ -41,7 +41,7 @@ export function getChipIcon(
     return WarningIcon();
   }
   if (isLoading) {
-    return LightLoadingIcon;
+    return LoadingIcon();
   }
   return icon;
 }

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

@@ -1,6 +1,5 @@
-import { getLoadingIconWith } from '@blocksuite/affine/components/icons';
+import { LoadingIcon } from '@blocksuite/affine/components/icons';
 import { WithDisposable } from '@blocksuite/affine/global/lit';
-import type { ColorScheme } from '@blocksuite/affine/model';
 import { unsafeCSSVar } from '@blocksuite/affine/shared/theme';
 import { baseTheme } from '@toeverything/theme';
 import {
@@ -88,7 +87,6 @@ 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 {
@@ -99,7 +97,7 @@ export class GeneratingPlaceholder extends WithDisposable(LitElement) {
         ? html`<div class="generating-header">Answer</div>`
         : nothing}
       <div class="generating-body">
-        <div class="generating-icon">${loadingIcon}</div>
+        <div class="generating-icon">${LoadingIcon()}</div>
         <div class="loading-progress">
           <div class="loading-text">${loadingText}</div>
           <div class="loading-stage">
@@ -129,9 +127,6 @@ export class GeneratingPlaceholder extends WithDisposable(LitElement) {
 
   @property({ attribute: false })
   accessor stages!: string[];
-
-  @property({ attribute: false })
-  accessor theme!: ColorScheme;
 }
 
 declare global {

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

@@ -79,7 +79,6 @@ export class AIPanelGenerating extends WithDisposable(LitElement) {
       ${stages && stages.length > 0
         ? html`<generating-placeholder
             .height=${height}
-            .theme=${this.theme}
             .loadingProgress=${this.loadingProgress}
             .stages=${stages}
             .showHeader=${!this.withAnswer}