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 -->
This commit is contained in:
fundon
2025-05-27 05:10:27 +00:00
parent 1b715e588c
commit 9465d0dc73
27 changed files with 103 additions and 166 deletions
@@ -1,6 +1,6 @@
import {
getAttachmentFileIcon,
getLoadingIconWith,
LoadingIcon,
WebIcon16,
} from '@blocksuite/affine-components/icons';
import type { FootNote } from '@blocksuite/affine-model';
@@ -8,7 +8,6 @@ import { ImageProxyService } from '@blocksuite/affine-shared/adapters';
import {
DocDisplayMetaProvider,
LinkPreviewServiceIdentifier,
ThemeProvider,
} from '@blocksuite/affine-shared/services';
import { unsafeCSSVar, unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
@@ -77,7 +76,7 @@ export class FootNotePopup extends SignalWatcher(WithDisposable(LitElement)) {
return getAttachmentFileIcon(fileType);
} else if (referenceType === 'url') {
if (this._isLoading$.value) {
return this._LoadingIcon();
return LoadingIcon();
}
const favicon = this._linkPreview$.value?.favicon;
@@ -126,11 +125,6 @@ export class FootNotePopup extends SignalWatcher(WithDisposable(LitElement)) {
return this._popupLabel$.value;
});
private readonly _LoadingIcon = () => {
const theme = this.std.get(ThemeProvider).theme;
return getLoadingIconWith(theme);
};
private readonly _onClick = () => {
this.onPopupClick(this.footnote, this.abortController);
this.abortController.abort();