From d55e34bc56523f6932bac4f376cfa58b59aca32b Mon Sep 17 00:00:00 2001
From: Mixiu <112144929+riopop@users.noreply.github.com>
Date: Tue, 22 Jul 2025 15:47:58 +0800
Subject: [PATCH] feat(runtime): add suspense event dispatch in Suspense
 component (#7122)

* feat(runtime): add suspense event dispatch in Suspense component

* chore(runtime): add changeset

* fix(runtime): Apply suggestions from code review

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* fix(runtime): optimize Suspense component script rendering

* fix(runtime): move dispatchSuspenseEvent function outside of withSuspense in Suspense.tsx

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 .changeset/lucky-weeks-nail.md    |  5 +++++
 packages/runtime/src/Suspense.tsx | 34 +++++++++++++++++++++++++++++++
 2 files changed, 39 insertions(+)
 create mode 100644 .changeset/lucky-weeks-nail.md

diff --git a/.changeset/lucky-weeks-nail.md b/.changeset/lucky-weeks-nail.md
new file mode 100644
index 000000000..1f967bdb4
--- /dev/null
+++ b/.changeset/lucky-weeks-nail.md
@@ -0,0 +1,5 @@
+---
+'@ice/runtime': patch
+---
+
+feat: add suspense event dispatch in Suspense component
diff --git a/packages/runtime/src/Suspense.tsx b/packages/runtime/src/Suspense.tsx
index 86866662c..b187aaf0a 100644
--- a/packages/runtime/src/Suspense.tsx
+++ b/packages/runtime/src/Suspense.tsx
@@ -126,6 +126,11 @@ interface SuspenseProps {
   [key: string]: any;
 }
 
+function dispatchSuspenseEvent(event: string, id: string) {
+  window.dispatchEvent(new CustomEvent(event, { detail: { id } }));
+}
+const DISPATCH_SUSPENSE_EVENT_STRING = dispatchSuspenseEvent.toString();
+
 export function withSuspense(Component) {
   return (props: SuspenseProps) => {
     const { fallback, id, ...componentProps } = props;
@@ -153,10 +158,22 @@ export function withSuspense(Component) {
 
     return (
       <React.Suspense fallback={fallback || null}>
+        <InlineScript
+          id={`suspense-parse-start-${id}`}
+          script={`(${DISPATCH_SUSPENSE_EVENT_STRING})('ice-suspense-parse-start','${id}');`}
+        />
         <SuspenseContext.Provider value={suspenseState}>
           <Component {...componentProps} />
+          <InlineScript
+            id={`suspense-parse-data-${id}`}
+            script={`(${DISPATCH_SUSPENSE_EVENT_STRING})('ice-suspense-parse-data','${id}');`}
+          />
           <Data id={id} />
         </SuspenseContext.Provider>
+        <InlineScript
+          id={`suspense-parse-end-${id}`}
+          script={`(${DISPATCH_SUSPENSE_EVENT_STRING})('ice-suspense-parse-end','${id}');`}
+        />
       </React.Suspense>
     );
   };
@@ -174,3 +191,20 @@ function Data(props) {
     />
   );
 }
+
+interface InlineScriptProps {
+  id: string;
+  script: string;
+}
+
+function InlineScript(props: InlineScriptProps) {
+  return (
+    <script
+      id={props.id}
+      dangerouslySetInnerHTML={{
+        __html: props.script,
+      }}
+      suppressHydrationWarning
+    />
+  );
+}
\ No newline at end of file