async/await is not yet supported in Client Components when using await supabase

Question

I'm having an issue with fetching data from supabase using await supabase in the client component.

Issue:

• very slow loading speed between pages, such as http://localhost:3000/dashboard/call-logs
• Occasionally it shows async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server. error.

https://react.dev/errors/482?invariant=482

This is an extension to this thread: Error: async/await is not yet supported in Client Components in next.js

app/(routes)/dashboard/call-logs/page.tsx

"use client";

import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
import SingleCallLog from "@/app/_components/call-logs/SingleCallLog";

export const dynamic = "force-dynamic";

// This is a private page: It's protected by the layout.js component which ensures the user is authenticated.
// It's a server compoment which means you can fetch data (like the user profile) before the page is rendered.
// See https://shipfa.st/docs/tutorials/private-page
export default async function Dashboard() {
  const supabase = createClientComponentClient();

  // @ts-ignore
  const {
    data: { user },
  } = await supabase.auth.getUser();
  const userID = user?.id;

  // as you can see I'm using await supabase here to fetch data
  const { data } = await supabase
    .from("firm")
    .select("phoneNumberID")
    .eq("user_id", userID)
    .single();

  const phoneNumberID = data ? data.phoneNumberID : null;
  const { data: callData, error } = await supabase
    .from("calls")
    .select("*")
    .eq("phoneNumberID", phoneNumberID);
  callData.sort(
    (a, b) =>
      new Date(b.inserted_at).getTime() - new Date(a.inserted_at).getTime()
  );

app/(routes)/dashboard/layout.tsx

import { ReactNode } from "react";
import { redirect } from "next/navigation";
import { cookies } from "next/headers";
import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
import config from "@/config";
import LeftSidebar from "../../container/LeftSidebar";
import Header from "../../container/Header";
import MobileNavigation from "@/app/container/MobileNavigation";

// This is a server-side component to ensure the user is logged in.
// If not, it will redirect to the login page.
// It's applied to all subpages of /dashboard in /app/dashboard/*** pages
// You can also add custom static UI elements like a Navbar, Sidebar, Footer, etc..
// See https://shipfa.st/docs/tutorials/private-page
export default async function LayoutPrivate({
  children,
}: {
  children: ReactNode;
}) {
  const supabase = createServerComponentClient({ cookies });

  const {
    data: { session },
  } = await supabase.auth.getSession();

  if (!session) {
    redirect(config.auth.loginUrl);
  }

  return (
    <>
      <Header />
      <LeftSidebar />
      <div className="block sm:hidden">
        <MobileNavigation />
      </div>
      {children}
    </>
  );
}