fix(slot): Render nothing when no outlet is registered (#112568)

Render slot consumer content only after an outlet element is available.

Previously the slot consumer rendered its children in place until the
outlet mounted, then switched over to a portal. That caused a flash of
content at the wrong DOM position and changed the rendered element type
under React, which reset component identity across outlet lifecycle
changes.

This makes the consumer return `null` until the outlet is ready and
updates the slot tests to match that behavior.

Refs GH-112564

Co-authored-by: OpenAI Codex <noreply@openai.com>

Author: JonasBa

static/app/components/core/slot/slot.spec.tsx

@@ -11,7 +11,7 @@ describe('slot', () => {
     expect(SlotModule.Fallback).toBeDefined();
   });
 
-  it('renders children in place when no Outlet is registered', () => {
+  it('renders nothing when no Outlet is registered', () => {
     const SlotModule = slot(['header'] as const);
 
     render(
@@ -22,7 +22,7 @@ describe('slot', () => {
       </SlotModule.Provider>
     );
 
-    expect(screen.getByText('inline content')).toBeInTheDocument();
+    expect(screen.queryByText('inline content')).not.toBeInTheDocument();
   });
 
   it('portals children to the Outlet element', () => {
@@ -44,7 +44,7 @@ describe('slot', () => {
     );
   });
 
-  it('multiple slot consumers render their children independently', () => {
+  it('multiple slot consumers render nothing independently when no Outlet is registered', () => {
     const SlotModule = slot(['a', 'b'] as const);
 
     render(
@@ -58,8 +58,8 @@ describe('slot', () => {
       </SlotModule.Provider>
     );
 
-    expect(screen.getByText('slot a content')).toBeInTheDocument();
-    expect(screen.getByText('slot b content')).toBeInTheDocument();
+    expect(screen.queryByText('slot a content')).not.toBeInTheDocument();
+    expect(screen.queryByText('slot b content')).not.toBeInTheDocument();
   });
 
   it('consumer throws when rendered outside provider', () => {

static/app/components/core/slot/slot.tsx

@@ -140,8 +140,6 @@ function makeSlotConsumer<T extends Slot>(
       return () => dispatch({type: 'decrement counter', name});
     }, [dispatch, name]);
 
-    const element = state[name]?.element;
-
     // Provide outletNameContext from the consumer so that portaled children
     // (which don't descend through the outlet in the component tree) can still
     // read which slot they belong to via useSlotOutletRef.
@@ -151,10 +149,12 @@ function makeSlotConsumer<T extends Slot>(
       </outletNameContext.Provider>
     );
 
+    const element = state[name]?.element;
+
     if (!element) {
-      // Render in place as a fallback when no target element is registered yet
-      return wrappedChildren;
+      return null;
     }
+
     return createPortal(wrappedChildren, element);
   }