Loading component inside server page Next 14

Question

I have server page in Next.js 14, which fetch and display data depends by search params, but I would like to apply loading ui for table inside page when user change this search params The main logic is changing date time options in PerformanceOptions component (code below) This is client component and when user change datetime option, it just move by router to the same url but with new search params, so until data loading, page still the same. That seems no good. Actually I can change data fetching on the client side, in this way I can just apply loaders on data fetch, but I ned keep SSR. I have tried use Suspense, but as I know, that will be work only for components which doing some async actions. Please, help me any ideas if it possible.

  // .......
  const revenue_report_data = await getRevenueReport(revenue_report_payload)
    if (!revenue_report_data) {
        throw new Error("Report data hasn't been got!")
    }
    const table_data = parseRevenueReportData(revenue_report_data)

    return (
        <DetailsPageLayout
            // ... props
        >
            <Card title={"Revenue Report"} contentClassName={"flex flex-col gap-5 p-5"}>
        // this is client component
                <PerformanceOptions time={+props.searchParams.time} period={period} folder_id={folder_id} />
                <PerformanceChart report={revenue_report_data} />
        // I need apply loading UI for this component on chage search params
                <FilteredTable columnHeaders={columnHeaders} rowsData={table_data} />
            </Card>
        </DetailsPageLayout>
    )
}
// .....