fix(editor): fix color of the circle on loading icon (#12092)

* Unified loading icon
* Removed loading icon on image block
* Fixed color of circle on loading icon

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

- **New Features**
  - Icons in image fallback and loading states now automatically adapt to the current theme (light or dark mode) for a more consistent visual experience.

- **Style**
  - Updated loading, success, and error icons to support theming and improved their color assignments for better visibility in different themes.

- **Refactor**
  - Replaced static icon usage across several components with dynamic, theme-aware icons to ensure consistent appearance throughout the app.
  - Removed static SVG icon exports and replaced them with theme-aware icon functions for improved maintainability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/blocks/image/src/image-block.ts

@@ -2,7 +2,10 @@ import { CaptionedBlockComponent } from '@blocksuite/affine-components/caption';
 import { whenHover } from '@blocksuite/affine-components/hover';
 import { Peekable } from '@blocksuite/affine-components/peek';
 import type { ImageBlockModel } from '@blocksuite/affine-model';
-import { ToolbarRegistryIdentifier } from '@blocksuite/affine-shared/services';
+import {
+  ThemeProvider,
+  ToolbarRegistryIdentifier,
+} from '@blocksuite/affine-shared/services';
 import { IS_MOBILE } from '@blocksuite/global/env';
 import { BlockSelection } from '@blocksuite/std';
 import { html } from 'lit';
@@ -111,6 +114,7 @@ export class ImageBlockComponent extends CaptionedBlockComponent<ImageBlockModel
       position: 'relative',
       width: '100%',
     });
+    const theme = this.std.get(ThemeProvider).theme$.value;
 
     return html`
       <div class="affine-image-container" style=${containerStyleMap}>
@@ -120,7 +124,8 @@ export class ImageBlockComponent extends CaptionedBlockComponent<ImageBlockModel
             html`<affine-image-fallback-card
               .error=${this.error}
               .loading=${this.loading}
-              .mode=${'page'}
+              .mode="${'page'}"
+              .theme=${theme}
             ></affine-image-fallback-card>`,
           () => html`<affine-page-image .block=${this}></affine-page-image>`
         )}