this is my simple code structure -

export default async function Post({ searchParams }: { searchParams: any }) {
  const widgets = {
    fetchContainer: (
      <Suspense key={Math.random()} fallback={"loading!"}>
        <FetchContainer searchParams={searchParams} /> // Delay for 3s
      </Suspense>
    ),
    fetchContainer2: (
      <Suspense key={Math.random()} fallback={"loading 22222 !"}>
        <SecondFetchContainer /> // Delay for 1s
      </Suspense>
    ),
  };

  return (
    <div>
      {widgets.fetchContainer}
      {widgets.fetchContainer2}
    </div>
  );
}

I observed a weird behavior (or I misunderstood the loading behind the scene) that if the key are both unique and random (or has changed), both components will behave normally with a loading fallback showing. However, if I changed the "SecondFetchContainer" key to a constant, let's say key={'b'}, the loading will become this -
"FetchContainer" wait "SecondFetchContainer" for 1s
"SecondFetchContainer" no loading (which is expected, since the key doesn't changed)
"FetchContainer" turn into loading for 2s

My expected behavior would be -
"FetchContainer" directly turn into loading for 3s
"SecondFetchContainer" no loading but data changed after 1s directly