import { Skeleton } from "@/components/ui/skeleton";

export default function DeviceLoading() {
  return (
    <div>
      <div className="flex items-center justify-between title-bg title-bg ring-2 ring-sarLinkOrange/50 rounded-lg p-4">
        <div className="flex flex-col space-y-2 justify-between items-start">
          <Skeleton className="h-8 w-44" />
          <Skeleton className="h-4 w-40" />
          <Skeleton className="h-4 w-48" />
        </div>
        <div className="flex items-center gap-2 flex-col">
          <Skeleton className="h-10 w-32" />
        </div>
      </div>

      <div
        id="user-filters"
        className=" py-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
      >
        <Skeleton className="h-10 sm:w-64" />
        {/* <Filter
        options={sortfilterOptions}
        defaultOption="asc"
        queryParamKey="sortBy"
      /> */}
      </div>
      {/* <Suspense key={query} fallback={"loading...."}>
      <DevicesTable searchParams={searchParams} />
    </Suspense> */}
    </div>
  );
}