My server component refresh only after first submit

my app/page.tsx

'use server'
import Form from "@/components/form";
import List from "@/components/list";
import { Suspense } from "react";

export default async function Home() {

  return (
    <div>
      <h1>TO DO APP</h1>
      <Suspense fallback={<>loading tasks</>}>
        <List/>
      </Suspense>
      <Form/>
    </div>
  );
}

Form is server component too. I’m call there server action addTask()

after async Prisma.io create entry I’m calling revalidatePath(‘/’) to refresh my List data

my components/list.tsx

'use server'
import prisma from '@/lib/prisma';
import Item from './item';

const getTasks = async () => {
  const delay = () => new Promise(resolve => setTimeout(resolve, 3000));
  await delay()
  return await prisma.task.findMany();
}

export default async function Test() {
  const tasks = await getTasks()

  return (
    <div>
      <ul>
        {tasks.map(item => {
          return <Item key={item.id} task={item}/>
        })}
      </ul>
    </div>
  );
}

it show <>loading tasks</> only on load and after first submit. On second submit it simply wait until tasks will fetch.

I delay it to see what will happen if my data will be big.
How can i let user that data is fetching? There is better solution for that?