I have the following code

return(
    <div className="flex grow pb-48 sm:px-7 px-5 pt-7 sm:space-x-6">
      <div className="hidden sm:flex sticky h-fit top-8 flex-col gap-6 w-72">
        <JobFilter
          filterSettings={filterSettings}
          setFilterSettings={setFilterSettings}
        />
        <JobNewsletter />
      </div>
      <div className="flex flex-col flex-1">
        <JobSearchBar setFilterSettings={setFilterSettings} />

        <JobList
          initialPosts={initialPosts}
          initialPostCount={initialTotalPosts}
          filterSettings={settings}
        />
      </div>
    </div>
  )

JobList, JobFilter and JobSearchBar needs to be able to share and set some state.
However, I'd like to somehow suspense (from the server side) the JobList, such that the JobList would load with some fallback loading state.

So I'd like to load some initial data from the server (into the JobList component), stream that to the client with a suspense fallback showing a loading state.