[Flight] Sort Server Components Track Group ahead of Client Scheduler…

…/Components Tracks (#31736)

Stacked on #31735.

This ensures that Server Components Track comes first. Since it's
typically rendered first on the server for initial load and then flows
into scheduler and client components work. Also puts it closer to the
Network and further away from "Main" JS.

<img width="769" alt="Screenshot 2024-12-11 at 5 31 41 PM"
src="https://github.com/user-attachments/assets/7198db0f-075e-4a78-8ea4-3bfbf06727cb"
/>

Same trick as in #31615.

packages/react-client/src/ReactFlightClient.js

@@ -69,7 +69,10 @@ import {createBoundServerReference} from './ReactFlightReplyClient';
 
 import {readTemporaryReference} from './ReactFlightTemporaryReferences';
 
-import {logComponentRender} from './ReactFlightPerformanceTrack';
+import {
+  markAllTracksInOrder,
+  logComponentRender,
+} from './ReactFlightPerformanceTrack';
 
 import {
   REACT_LAZY_TYPE,
@@ -643,6 +646,7 @@ export function reportGlobalError(response: Response, error: Error): void {
     }
   });
   if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    markAllTracksInOrder();
     flushComponentPerformance(getChunk(response, 0), 0, -Infinity);
   }
 }

packages/react-client/src/ReactFlightPerformanceTrack.js

@@ -19,6 +19,26 @@ const supportsUserTiming =
 
 const COMPONENTS_TRACK = 'Server Components ⚛';
 
+const componentsTrackMarker = {
+  startTime: 0.001,
+  detail: {
+    devtools: {
+      color: 'primary-light',
+      track: 'Primary',
+      trackGroup: COMPONENTS_TRACK,
+    },
+  },
+};
+
+export function markAllTracksInOrder() {
+  if (supportsUserTiming) {
+    // Ensure we create the Server Component track groups earlier than the Client Scheduler
+    // and Client Components. We can always add the 0 time slot even if it's in the past.
+    // That's still considered for ordering.
+    performance.mark('Server Components Track', componentsTrackMarker);
+  }
+}
+
 // Reused to avoid thrashing the GC.
 const reusableComponentDevToolDetails = {
   color: 'primary',

packages/react-reconciler/src/ReactFiberPerformanceTrack.js

@@ -63,7 +63,7 @@ export function setCurrentTrackFromLanes(lanes: Lanes): void {
 }
 
 const blockingLaneMarker = {
-  startTime: 0,
+  startTime: 0.003,
   detail: {
     devtools: {
       color: 'primary-light',
@@ -74,7 +74,7 @@ const blockingLaneMarker = {
 };
 
 const transitionLaneMarker = {
-  startTime: 0,
+  startTime: 0.003,
   detail: {
     devtools: {
       color: 'primary-light',
@@ -85,7 +85,7 @@ const transitionLaneMarker = {
 };
 
 const suspenseLaneMarker = {
-  startTime: 0,
+  startTime: 0.003,
   detail: {
     devtools: {
       color: 'primary-light',
@@ -96,7 +96,7 @@ const suspenseLaneMarker = {
 };
 
 const idleLaneMarker = {
-  startTime: 0,
+  startTime: 0.003,
   detail: {
     devtools: {
       color: 'primary-light',