diff --git a/packages/x-markdown/src/XMarkdown/__tests__/loading-isolation.test.tsx b/packages/x-markdown/src/XMarkdown/__tests__/loading-isolation.test.tsx
new file mode 100644
index 000000000..b3cfe1621
--- /dev/null
+++ b/packages/x-markdown/src/XMarkdown/__tests__/loading-isolation.test.tsx
@@ -0,0 +1,361 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import XMarkdown from '../index';
+import { Parser, Renderer } from '../core';
+import type { ComponentProps } from '../interface';
+
+/**
+ * Tests for Issue #1949: XMarkdown 多个自定义组件同时进入 loading
+ *
+ * Verifies that streamStatus (loading/done) is isolated per component instance,
+ * not shared across all instances of the same tag name or across different tag names.
+ *
+ * Background:
+ *   Before the fix (PR #1590), `detectUnclosedTags` returned a Set of tag NAMES
+ *   (e.g. "my-comp"), and `createReplaceElement` checked `unclosedTags.has(name)`.
+ *   If ANY instance of a tag was unclosed, ALL instances of that tag (and potentially
+ *   all custom components) would receive `streamStatus: 'loading'`.
+ *
+ *   After the fix, `detectUnclosedComponentTags` returns a Set of instance IDs
+ *   (e.g. "my-comp-2"), and `createReplaceElement` checks
+ *   `unclosedTags.has(getTagInstanceId(name, tagIndex))`, isolating loading state
+ *   per component instance.
+ */
+
+const MockComponent: React.FC<any> = (props) => {
+  return React.createElement(
+    'div',
+    { 'data-stream-status': props.streamStatus },
+    props.children,
+  );
+};
+
+// Track streamStatus for each render of a component
+interface StreamStatusRecord {
+  name: string;
+  streamStatus: string;
+}
+
+describe('Loading isolation (Issue #1949)', () => {
+  // ============================================================
+  // Renderer-level tests: verify createReplaceElement isolates
+  // streamStatus per instance
+  // ============================================================
+  describe('Renderer: per-instance streamStatus isolation', () => {
+    it('should mark only the unclosed instance as loading (different tag names)', () => {
+      const components = { 'comp-a': MockComponent, 'comp-b': MockComponent };
+      const renderer = new Renderer({ components });
+      const spy = jest.spyOn(React, 'createElement');
+
+      // comp-a is closed, comp-b is unclosed
+      renderer.processHtml('<comp-a>A</comp-a><comp-b>B');
+
+      const calls = spy.mock.calls.filter((c) => c[0] === MockComponent);
+      const a = calls.filter((c) => (c[1] as any).domNode?.name === 'comp-a');
+      const b = calls.filter((c) => (c[1] as any).domNode?.name === 'comp-b');
+
+      expect(a[0][1]).toEqual(expect.objectContaining({ streamStatus: 'done' }));
+      expect(b[0][1]).toEqual(expect.objectContaining({ streamStatus: 'loading' }));
+
+      spy.mockRestore();
+    });
+
+    it('should mark only the unclosed instance as loading (same tag name)', () => {
+      const components = { 'my-comp': MockComponent };
+      const renderer = new Renderer({ components });
+      const spy = jest.spyOn(React, 'createElement');
+
+      // First instance is closed, second is unclosed
+      renderer.processHtml('<my-comp>Done</my-comp><my-comp>Loading');
+
+      const calls = spy.mock.calls.filter((c) => c[0] === MockComponent);
+      expect(calls).toHaveLength(2);
+
+      expect(calls[0][1]).toEqual(expect.objectContaining({ streamStatus: 'done' }));
+      expect(calls[1][1]).toEqual(expect.objectContaining({ streamStatus: 'loading' }));
+
+      spy.mockRestore();
+    });
+
+    it('should isolate loading for 3+ components with only the last one loading', () => {
+      const components = {
+        'comp-a': MockComponent,
+        'comp-b': MockComponent,
+        'comp-c': MockComponent,
+      };
+      const renderer = new Renderer({ components });
+      const spy = jest.spyOn(React, 'createElement');
+
+      renderer.processHtml('<comp-a>A</comp-a><comp-b>B</comp-b><comp-c>C');
+
+      const calls = spy.mock.calls.filter((c) => c[0] === MockComponent);
+      expect(calls).toHaveLength(3);
+
+      expect(calls[0][1]).toEqual(expect.objectContaining({ streamStatus: 'done' }));
+      expect(calls[1][1]).toEqual(expect.objectContaining({ streamStatus: 'done' }));
+      expect(calls[2][1]).toEqual(expect.objectContaining({ streamStatus: 'loading' }));
+
+      spy.mockRestore();
+    });
+
+    it('should handle interleaved same-name components correctly', () => {
+      const components = { 'comp-a': MockComponent };
+      const renderer = new Renderer({ components });
+      const spy = jest.spyOn(React, 'createElement');
+
+      // A1 closed, A2 closed, A3 unclosed
+      renderer.processHtml('<comp-a>1</comp-a><comp-a>2</comp-a><comp-a>3');
+
+      const calls = spy.mock.calls.filter((c) => c[0] === MockComponent);
+      expect(calls).toHaveLength(3);
+
+      expect(calls[0][1]).toEqual(expect.objectContaining({ streamStatus: 'done' }));
+      expect(calls[1][1]).toEqual(expect.objectContaining({ streamStatus: 'done' }));
+      expect(calls[2][1]).toEqual(expect.objectContaining({ streamStatus: 'loading' }));
+
+      spy.mockRestore();
+    });
+
+    it('should handle interleaved different-name components correctly', () => {
+      const components = { 'comp-a': MockComponent, 'comp-b': MockComponent };
+      const renderer = new Renderer({ components });
+      const spy = jest.spyOn(React, 'createElement');
+
+      // a closed, b closed, a closed, b unclosed
+      renderer.processHtml('<comp-a>A1</comp-a><comp-b>B1</comp-b><comp-a>A2</comp-a><comp-b>B2');
+
+      const calls = spy.mock.calls.filter((c) => c[0] === MockComponent);
+      const aCalls = calls.filter((c) => (c[1] as any).domNode?.name === 'comp-a');
+      const bCalls = calls.filter((c) => (c[1] as any).domNode?.name === 'comp-b');
+
+      expect(aCalls).toHaveLength(2);
+      expect(bCalls).toHaveLength(2);
+
+      expect(aCalls[0][1]).toEqual(expect.objectContaining({ streamStatus: 'done' }));
+      expect(aCalls[1][1]).toEqual(expect.objectContaining({ streamStatus: 'done' }));
+      expect(bCalls[0][1]).toEqual(expect.objectContaining({ streamStatus: 'done' }));
+      expect(bCalls[1][1]).toEqual(expect.objectContaining({ streamStatus: 'loading' }));
+
+      spy.mockRestore();
+    });
+
+    it('should mark all as done when all tags are closed', () => {
+      const components = { 'comp-a': MockComponent, 'comp-b': MockComponent };
+      const renderer = new Renderer({ components });
+      const spy = jest.spyOn(React, 'createElement');
+
+      renderer.processHtml('<comp-a>A</comp-a><comp-b>B</comp-b>');
+
+      const calls = spy.mock.calls.filter((c) => c[0] === MockComponent);
+      expect(calls).toHaveLength(2);
+      expect(calls[0][1]).toEqual(expect.objectContaining({ streamStatus: 'done' }));
+      expect(calls[1][1]).toEqual(expect.objectContaining({ streamStatus: 'done' }));
+
+      spy.mockRestore();
+    });
+
+    it('should handle self-closing tag followed by unclosed tag', () => {
+      const components = { 'comp-a': MockComponent, 'comp-b': MockComponent };
+      const renderer = new Renderer({ components });
+      const spy = jest.spyOn(React, 'createElement');
+
+      renderer.processHtml('<comp-a /><comp-b>B');
+
+      const calls = spy.mock.calls.filter((c) => c[0] === MockComponent);
+      const a = calls.filter((c) => (c[1] as any).domNode?.name === 'comp-a');
+      const b = calls.filter((c) => (c[1] as any).domNode?.name === 'comp-b');
+
+      expect(a[0][1]).toEqual(expect.objectContaining({ streamStatus: 'done' }));
+      expect(b[0][1]).toEqual(expect.objectContaining({ streamStatus: 'loading' }));
+
+      spy.mockRestore();
+    });
+
+    it('should handle nested unclosed parent with closed child', () => {
+      const components = { 'comp-a': MockComponent, 'comp-b': MockComponent };
+      const renderer = new Renderer({ components });
+      const spy = jest.spyOn(React, 'createElement');
+
+      // comp-a unclosed, comp-b closed inside comp-a
+      renderer.processHtml('<comp-a>text<comp-b>inner</comp-b>');
+
+      const calls = spy.mock.calls.filter((c) => c[0] === MockComponent);
+      const a = calls.filter((c) => (c[1] as any).domNode?.name === 'comp-a');
+      const b = calls.filter((c) => (c[1] as any).domNode?.name === 'comp-b');
+
+      // Parent should be loading (unclosed), child should be done (closed)
+      expect(a[0][1]).toEqual(expect.objectContaining({ streamStatus: 'loading' }));
+      expect(b[0][1]).toEqual(expect.objectContaining({ streamStatus: 'done' }));
+
+      spy.mockRestore();
+    });
+
+    it('should handle deep nesting with mixed states', () => {
+      const components = { 'comp-a': MockComponent };
+      const renderer = new Renderer({ components });
+      const spy = jest.spyOn(React, 'createElement');
+
+      // Level 1 open, Level 2 open, Level 3 closed
+      renderer.processHtml('<comp-a>1<comp-a>2<comp-a>3</comp-a>');
+
+      const calls = spy.mock.calls.filter((c) => c[0] === MockComponent);
+      expect(calls).toHaveLength(3);
+
+      // Innermost (Level 3) processed first - done
+      expect(calls[0][1]).toEqual(expect.objectContaining({ streamStatus: 'done' }));
+      // Level 2 - loading
+      expect(calls[1][1]).toEqual(expect.objectContaining({ streamStatus: 'loading' }));
+      // Level 1 - loading
+      expect(calls[2][1]).toEqual(expect.objectContaining({ streamStatus: 'loading' }));
+
+      spy.mockRestore();
+    });
+  });
+
+  // ============================================================
+  // Full pipeline tests: verify Parser + Renderer isolates
+  // streamStatus through the complete markdown → HTML → React
+  // pipeline
+  // ============================================================
+  describe('Full pipeline (Parser + Renderer): loading isolation', () => {
+    it('should isolate loading through marked parsing and DOMPurify sanitization', () => {
+      const components = {
+        'comp-a': MockComponent,
+        'comp-b': MockComponent,
+        'comp-c': MockComponent,
+      };
+      const parser = new Parser({ components });
+      const renderer = new Renderer({ components });
+      const spy = jest.spyOn(React, 'createElement');
+
+      // comp-a and comp-b are closed, comp-c is unclosed
+      const markdown = '<comp-a>A</comp-a>\n\n<comp-b>B</comp-b>\n\n<comp-c>C';
+      const html = parser.parse(markdown);
+      renderer.render(html);
+
+      const calls = spy.mock.calls.filter((c) => c[0] === MockComponent);
+      const a = calls.filter((c) => (c[1] as any).domNode?.name === 'comp-a');
+      const b = calls.filter((c) => (c[1] as any).domNode?.name === 'comp-b');
+      const c = calls.filter((c) => (c[1] as any).domNode?.name === 'comp-c');
+
+      expect(a[0][1]).toEqual(expect.objectContaining({ streamStatus: 'done' }));
+      expect(b[0][1]).toEqual(expect.objectContaining({ streamStatus: 'done' }));
+      expect(c[0][1]).toEqual(expect.objectContaining({ streamStatus: 'loading' }));
+
+      spy.mockRestore();
+    });
+  });
+
+  // ============================================================
+  // XMarkdown component tests: verify the full component
+  // correctly isolates loading during streaming
+  // ============================================================
+  describe('XMarkdown component: streaming loading isolation', () => {
+    it('should show loading only for the unclosed component during streaming', () => {
+      const records: StreamStatusRecord[] = [];
+
+      const CompA: React.FC<ComponentProps> = (props) => {
+        records.push({ name: 'comp-a', streamStatus: props.streamStatus });
+        return React.createElement('div', { 'data-status': props.streamStatus }, props.children);
+      };
+      const CompB: React.FC<ComponentProps> = (props) => {
+        records.push({ name: 'comp-b', streamStatus: props.streamStatus });
+        return React.createElement('div', { 'data-status': props.streamStatus }, props.children);
+      };
+
+      // comp-a is fully closed, comp-b is still streaming (unclosed)
+      render(
+        <XMarkdown
+          content="<comp-a>Done</comp-a>
+
+<comp-b>Streaming"
+          streaming={{ hasNextChunk: true }}
+          components={{ 'comp-a': CompA, 'comp-b': CompB }}
+          paragraphTag="div"
+        />,
+      );
+
+      const aRecords = records.filter((r) => r.name === 'comp-a');
+      const bRecords = records.filter((r) => r.name === 'comp-b');
+
+      expect(aRecords.length).toBeGreaterThan(0);
+      expect(aRecords[aRecords.length - 1].streamStatus).toBe('done');
+
+      expect(bRecords.length).toBeGreaterThan(0);
+      expect(bRecords[bRecords.length - 1].streamStatus).toBe('loading');
+    });
+
+    it('should independently complete loading when streaming finishes', () => {
+      const records: StreamStatusRecord[] = [];
+
+      const CompA: React.FC<ComponentProps> = (props) => {
+        records.push({ name: 'comp-a', streamStatus: props.streamStatus });
+        return React.createElement('div', { 'data-status': props.streamStatus }, props.children);
+      };
+      const CompB: React.FC<ComponentProps> = (props) => {
+        records.push({ name: 'comp-b', streamStatus: props.streamStatus });
+        return React.createElement('div', { 'data-status': props.streamStatus }, props.children);
+      };
+
+      const components = { 'comp-a': CompA, 'comp-b': CompB };
+
+      // Start with comp-b unclosed
+      const { rerender } = render(
+        <XMarkdown
+          content="<comp-a>A</comp-a>
+
+<comp-b>B"
+          streaming={{ hasNextChunk: true }}
+          components={components}
+          paragraphTag="div"
+        />,
+      );
+
+      // Verify comp-b was loading
+      const midB = records.filter((r) => r.name === 'comp-b');
+      expect(midB[midB.length - 1].streamStatus).toBe('loading');
+
+      // Clear records and complete comp-b
+      records.length = 0;
+      rerender(
+        <XMarkdown
+          content="<comp-a>A</comp-a>
+
+<comp-b>B</comp-b>"
+          streaming={{ hasNextChunk: false }}
+          components={components}
+          paragraphTag="div"
+        />,
+      );
+
+      // Both should be done after streaming completes
+      const finalA = records.filter((r) => r.name === 'comp-a');
+      const finalB = records.filter((r) => r.name === 'comp-b');
+      expect(finalA[finalA.length - 1].streamStatus).toBe('done');
+      expect(finalB[finalB.length - 1].streamStatus).toBe('done');
+    });
+
+    it('should handle multiple same-type components with different loading states', () => {
+      const records: StreamStatusRecord[] = [];
+
+      const MyComp: React.FC<ComponentProps> = (props) => {
+        records.push({ name: 'my-comp', streamStatus: props.streamStatus });
+        return React.createElement('div', { 'data-status': props.streamStatus }, props.children);
+      };
+
+      // First instance is closed, second is unclosed (still streaming)
+      render(
+        <XMarkdown
+          content={'<my-comp>First complete</my-comp>\n\nText\n\n<my-comp>Second streaming'}
+          streaming={{ hasNextChunk: true }}
+          components={{ 'my-comp': MyComp }}
+          paragraphTag="div"
+        />,
+      );
+
+      expect(records.length).toBe(2);
+      expect(records[0].streamStatus).toBe('done');
+      expect(records[1].streamStatus).toBe('loading');
+    });
+  });
+});
\ No newline at end of file
diff --git a/packages/x/components/sender/__tests__/slot.test.tsx b/packages/x/components/sender/__tests__/slot.test.tsx
index e1cff6a5c..6ec73bb18 100644
--- a/packages/x/components/sender/__tests__/slot.test.tsx
+++ b/packages/x/components/sender/__tests__/slot.test.tsx
@@ -523,6 +523,47 @@ describe('Sender Slot Component', () => {
       setupDOMMocks(customSelectionMock, customRangeMock);
       fireEvent.keyDown(dom, { key: 'Backspace' });
     });
+    it('should trigger onClose when skill is removed via Backspace', () => {
+      const mockOnClose = jest.fn();
+      const ref = createRef<SenderRef>();
+      const { container } = render(
+        <Sender
+          ref={ref}
+          slotConfig={[]}
+          placeholder="Sender placeholder"
+          skill={{
+            value: 'test-skill',
+            title: 'Test Skill',
+            closable: {
+              onClose: mockOnClose,
+            },
+          }}
+        />,
+      );
+      const dom = ref.current?.inputElement as HTMLElement;
+      const skillDom = container.querySelector('.ant-sender-skill') as HTMLElement;
+      expect(ref.current).toBeDefined();
+      expect(skillDom).toBeDefined();
+
+      const customSelectionMock = {
+        rangeCount: 1,
+        focusOffset: 0,
+        anchorNode: dom,
+        removeAllRanges: jest.fn(),
+        addRange: jest.fn(),
+      };
+
+      Object.defineProperty(dom, 'previousSibling', {
+        value: skillDom,
+        configurable: true,
+      });
+
+      const customRangeMock = createMockRange();
+      setupDOMMocks(customSelectionMock, customRangeMock);
+      fireEvent.keyDown(dom, { key: 'Backspace' });
+
+      expect(mockOnClose).toHaveBeenCalledTimes(1);
+    });
     it('should handle skill removal and addition', () => {
       const { rerender, container } = render(
         <Sender
diff --git a/packages/x/components/sender/components/SlotTextArea.tsx b/packages/x/components/sender/components/SlotTextArea.tsx
index 47963b01d..3c8465c9c 100644
--- a/packages/x/components/sender/components/SlotTextArea.tsx
+++ b/packages/x/components/sender/components/SlotTextArea.tsx
@@ -525,6 +525,9 @@ const SlotTextArea = React.forwardRef<SlotTextAreaRef>((_, ref) => {
           if (skillKey) {
             e.preventDefault();
             removeSkill();
+            // Fire onClose callback to match click-close behavior (Skill.tsx)
+            const closableConfig = typeof skill?.closable === 'boolean' ? {} : skill?.closable;
+            closableConfig?.onClose?.(e as unknown as React.MouseEvent<HTMLDivElement>);
             return true;
           }
         }
diff --git a/packages/x/docs/x-markdown/demo/streaming/multi-component-loading.tsx b/packages/x/docs/x-markdown/demo/streaming/multi-component-loading.tsx
new file mode 100644
index 000000000..bebfe23bc
--- /dev/null
+++ b/packages/x/docs/x-markdown/demo/streaming/multi-component-loading.tsx
@@ -0,0 +1,162 @@
+import { Bubble } from '@ant-design/x';
+import XMarkdown, { type ComponentProps } from '@ant-design/x-markdown';
+import { Button, Flex, Skeleton, Tag, theme } from 'antd';
+import React from 'react';
+import '@ant-design/x-markdown/themes/light.css';
+import '@ant-design/x-markdown/themes/dark.css';
+
+/**
+ * Demo: Multiple custom components with independent loading states (Issue #1949)
+ *
+ * During streaming, each custom component should independently enter/exit the
+ * loading state based on whether its own closing tag has arrived — not all
+ * components loading together when only one is still streaming.
+ */
+
+// A custom component that shows different content based on streamStatus
+const DataCard = React.memo(({ children, streamStatus }: ComponentProps) => {
+  if (streamStatus === 'loading') {
+    return (
+      <div style={{ padding: 12, border: '1px dashed var(--ant-color-border)', borderRadius: 8 }}>
+        <Skeleton active paragraph={{ rows: 2 }} title={{ width: 120 }} />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      style={{
+        padding: 12,
+        border: '1px solid var(--ant-color-border)',
+        borderRadius: 8,
+        background: 'var(--ant-color-fill-quaternary)',
+      }}
+    >
+      <div style={{ fontWeight: 600, marginBottom: 4 }}>
+        Data Card <Tag color="green" style={{ fontSize: 11 }}>done</Tag>
+      </div>
+      <div>{children}</div>
+    </div>
+  );
+});
+
+// Another custom component type to demonstrate cross-type isolation
+const InfoPanel = React.memo(({ children, streamStatus }: ComponentProps) => {
+  if (streamStatus === 'loading') {
+    return (
+      <div style={{ padding: 12, border: '1px dashed var(--ant-color-border)', borderRadius: 8 }}>
+        <Skeleton.Input active size="small" style={{ width: 200 }} />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      style={{
+        padding: 12,
+        border: '1px solid var(--ant-color-border-secondary)',
+        borderRadius: 8,
+        background: 'var(--ant-color-bg-container)',
+      }}
+    >
+      <div style={{ fontWeight: 600, marginBottom: 4 }}>
+        Info Panel <Tag color="blue" style={{ fontSize: 11 }}>done</Tag>
+      </div>
+      <div>{children}</div>
+    </div>
+  );
+});
+
+// Markdown content with multiple custom components
+const text = `Here are multiple custom components rendered independently:
+
+<data-card>Component A: This is the first data card content.</data-card>
+
+Some text between components.
+
+<info-panel>Component B: This info panel downloads independently.</info-panel>
+
+More text.
+
+<data-card>Component C: Another data card with its own loading state.</data-card>
+`;
+
+const App = () => {
+  const [index, setIndex] = React.useState(0);
+  const [isStreaming, setIsStreaming] = React.useState(false);
+  const timer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const contentRef = React.useRef<HTMLDivElement>(null);
+  const { theme: antdTheme } = theme.useToken();
+  const className = antdTheme.id === 0 ? 'x-markdown-light' : 'x-markdown-dark';
+
+  React.useEffect(() => {
+    if (timer.current) clearTimeout(timer.current);
+
+    if (index >= text.length) {
+      setIsStreaming(false);
+      return;
+    }
+
+    setIsStreaming(true);
+    timer.current = setTimeout(() => {
+      setIndex((prev) => Math.min(prev + 3, text.length));
+    }, 30);
+
+    return () => {
+      if (timer.current) clearTimeout(timer.current);
+    };
+  }, [index]);
+
+  React.useEffect(() => {
+    if (contentRef.current) {
+      contentRef.current.scrollTop = contentRef.current.scrollHeight;
+    }
+  }, [index]);
+
+  return (
+    <Flex vertical gap="small" style={{ height: 500 }}>
+      <Flex justify="flex-end">
+        <Button
+          type="primary"
+          size="small"
+          onClick={() => {
+            setIndex(0);
+            setIsStreaming(true);
+          }}
+        >
+          Re-Stream
+        </Button>
+      </Flex>
+
+      <div
+        ref={contentRef}
+        style={{
+          flex: 1,
+          overflow: 'auto',
+          padding: 16,
+          border: '1px solid var(--ant-color-border)',
+          borderRadius: 8,
+        }}
+      >
+        <Bubble
+          content={text.slice(0, index)}
+          contentRender={(content) => (
+            <XMarkdown
+              className={className}
+              content={content as string}
+              paragraphTag="div"
+              streaming={{ hasNextChunk: isStreaming }}
+              components={{
+                'data-card': DataCard,
+                'info-panel': InfoPanel,
+              }}
+            />
+          )}
+          variant="outlined"
+        />
+      </div>
+    </Flex>
+  );
+};
+
+export default App;
\ No newline at end of file
diff --git a/packages/x/docs/x-markdown/streaming.en-US.md b/packages/x/docs/x-markdown/streaming.en-US.md
index 8c72672bb..e30067bfb 100644
--- a/packages/x/docs/x-markdown/streaming.en-US.md
+++ b/packages/x/docs/x-markdown/streaming.en-US.md
@@ -7,7 +7,7 @@ Handle **LLM streamed Markdown** output: syntax completion and caching, animatio
 
 ## Code Examples
 
-<code src="./demo/streaming/format.tsx" description="Incomplete syntax recovery and placeholders">Syntax Processing</code> <code src="./demo/streaming/animation.tsx" description="Fade-in, tail cursor, and debug switches (slower stream pace for observation)">Rendering Controls</code>
+<code src="./demo/streaming/format.tsx" description="Incomplete syntax recovery and placeholders">Syntax Processing</code> <code src="./demo/streaming/animation.tsx" description="Fade-in, tail cursor, and debug switches (slower stream pace for observation)">Rendering Controls</code> <code src="./demo/streaming/multi-component-loading.tsx" description="Each custom component independently enters/exits loading state during streaming">Multi-Component Loading Isolation</code>
 
 ## API
 
diff --git a/packages/x/docs/x-markdown/streaming.zh-CN.md b/packages/x/docs/x-markdown/streaming.zh-CN.md
index a828fa3a9..ea27fe50c 100644
--- a/packages/x/docs/x-markdown/streaming.zh-CN.md
+++ b/packages/x/docs/x-markdown/streaming.zh-CN.md
@@ -7,7 +7,7 @@ order: 4
 
 ## 代码示例
 
-<code src="./demo/streaming/format.tsx" description="不完整语法修复与占位">语法处理</code> <code src="./demo/streaming/animation.tsx">渲染控制</code>
+<code src="./demo/streaming/format.tsx" description="不完整语法修复与占位">语法处理</code> <code src="./demo/streaming/animation.tsx">渲染控制</code> <code src="./demo/streaming/multi-component-loading.tsx" description="多个自定义组件各自独立 loading，不再同时进入 loading">多组件 Loading 隔离</code>
 
 ## API