diff --git a/blocksuite/affine/blocks/attachment/package.json b/blocksuite/affine/blocks/attachment/package.json
index ebefe8098d..07d2ad1d09 100644
--- a/blocksuite/affine/blocks/attachment/package.json
+++ b/blocksuite/affine/blocks/attachment/package.json
@@ -21,6 +21,7 @@
     "@blocksuite/icons": "^2.2.12",
     "@blocksuite/std": "workspace:*",
     "@blocksuite/store": "workspace:*",
+    "@blocksuite/sync": "workspace:*",
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
diff --git a/blocksuite/affine/blocks/attachment/src/attachment-block.ts b/blocksuite/affine/blocks/attachment/src/attachment-block.ts
index 951144a732..adba0a6d96 100644
--- a/blocksuite/affine/blocks/attachment/src/attachment-block.ts
+++ b/blocksuite/affine/blocks/attachment/src/attachment-block.ts
@@ -35,7 +35,9 @@ import { when } from 'lit/directives/when.js';
 import { AttachmentEmbedProvider } from './embed';
 import { styles } from './styles';
 import { downloadAttachmentBlob, refreshData } from './utils';
+
 type State = 'loading' | 'uploading' | 'warning' | 'oversize' | 'none';
+
 @Peekable({
   enableOn: ({ model }: AttachmentBlockComponent) => {
     return !model.doc.readonly && model.props.type.endsWith('pdf');
@@ -102,7 +104,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
   }
 
   determineState = (
-    loading: boolean,
+    downloading: boolean,
     uploading: boolean,
     overSize: boolean,
     error: boolean
@@ -110,7 +112,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
     if (overSize) return 'oversize';
     if (error) return 'warning';
     if (uploading) return 'uploading';
-    if (loading) return 'loading';
+    if (downloading) return 'loading';
     return 'none';
   };
 
@@ -306,8 +308,8 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
     } = blobState;
     const warning = !overSize && Boolean(errorMessage);
     const error = overSize || warning;
-    const loading = !error && downloading;
-    const state = this.determineState(loading, uploading, overSize, error);
+    const state = this.determineState(downloading, uploading, overSize, error);
+    const loading = state === 'loading' || state === 'uploading';
 
     const classInfo = {
       'affine-attachment-card': true,
diff --git a/blocksuite/affine/blocks/attachment/src/styles.ts b/blocksuite/affine/blocks/attachment/src/styles.ts
index 6ec0bb32ab..626dc571b4 100644
--- a/blocksuite/affine/blocks/attachment/src/styles.ts
+++ b/blocksuite/affine/blocks/attachment/src/styles.ts
@@ -117,6 +117,11 @@ export const styles = css`
     }
   }
 
+  .affine-attachment-card.loading,
+  .affine-attachment-card.error {
+    background: ${unsafeCSSVarV2('layer/background/secondary')};
+  }
+
   .affine-attachment-card.cubeThick {
     flex-direction: column-reverse;
 
diff --git a/blocksuite/affine/blocks/attachment/tsconfig.json b/blocksuite/affine/blocks/attachment/tsconfig.json
index c555016157..26feddf392 100644
--- a/blocksuite/affine/blocks/attachment/tsconfig.json
+++ b/blocksuite/affine/blocks/attachment/tsconfig.json
@@ -16,6 +16,7 @@
     { "path": "../../widgets/slash-menu" },
     { "path": "../../../framework/global" },
     { "path": "../../../framework/std" },
-    { "path": "../../../framework/store" }
+    { "path": "../../../framework/store" },
+    { "path": "../../../framework/sync" }
   ]
 }
diff --git a/tools/utils/src/workspace.gen.ts b/tools/utils/src/workspace.gen.ts
index d505de76e5..88d69114ae 100644
--- a/tools/utils/src/workspace.gen.ts
+++ b/tools/utils/src/workspace.gen.ts
@@ -84,6 +84,7 @@ export const PackageList = [
       'blocksuite/framework/global',
       'blocksuite/framework/std',
       'blocksuite/framework/store',
+      'blocksuite/framework/sync',
     ],
   },
   {
diff --git a/yarn.lock b/yarn.lock
index 91349d1d4d..6869ecc468 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2417,6 +2417,7 @@ __metadata:
     "@blocksuite/icons": "npm:^2.2.12"
     "@blocksuite/std": "workspace:*"
     "@blocksuite/store": "workspace:*"
+    "@blocksuite/sync": "workspace:*"
     "@floating-ui/dom": "npm:^1.6.13"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"