trigger the actual same level boundary

Author: huozhi

packages/next/src/client/components/layout-router.tsx

@@ -445,6 +445,21 @@ function LoadingBoundary({
   loading: LoadingModuleData | Promise<LoadingModuleData>
   children: React.ReactNode
 }): JSX.Element {
+  if (
+    process.env.NODE_ENV !== 'production' &&
+    process.env.__NEXT_DEVTOOL_SEGMENT_EXPLORER
+  ) {
+    const { SegmentBoundaryTriggerNode } =
+      require('../../next-devtools/userspace/app/segment-explorer-node') as typeof import('../../next-devtools/userspace/app/segment-explorer-node')
+
+    children = (
+      <>
+        <SegmentBoundaryTriggerNode />
+        {children}
+      </>
+    )
+  }
+
   // If loading is a promise, unwrap it. This happens in cases where we haven't
   // yet received the loading data from the server — which includes whether or
   // not this layout has a loading component at all.

packages/next/src/next-devtools/userspace/app/segment-explorer-node.tsx

@@ -76,6 +76,19 @@ export function SegmentViewStateNode({ page }: { page: string }) {
   return null
 }
 
+export function SegmentBoundaryTriggerNode() {
+  const { boundaryType } = useSegmentState()
+  let segmentNode: React.ReactNode = null
+  if (boundaryType === 'loading') {
+    segmentNode = <LoadingSegmentNode />
+  } else if (boundaryType === 'not-found') {
+    segmentNode = <NotFoundSegmentNode />
+  } else if (boundaryType === 'error') {
+    segmentNode = <ErrorSegmentNode />
+  }
+  return segmentNode
+}
+
 export function SegmentViewNode({
   type,
   pagePath,
@@ -85,22 +98,9 @@ export function SegmentViewNode({
   pagePath: string
   children?: ReactNode
 }): React.ReactNode {
-  const { boundaryType } = useSegmentState()
-
-  const isChildBoundary = type !== 'layout' && type !== 'template'
-
-  let segmentNode = (
+  const segmentNode = (
     <SegmentTrieNode key={type} type={type} pagePath={pagePath} />
   )
-  if (boundaryType && boundaryType !== type && isChildBoundary) {
-    if (boundaryType === 'loading') {
-      segmentNode = <LoadingSegmentNode />
-    } else if (boundaryType === 'not-found') {
-      segmentNode = <NotFoundSegmentNode />
-    } else if (boundaryType === 'error') {
-      segmentNode = <ErrorSegmentNode />
-    }
-  }
 
   return (
     <>