Hello! I'm experiencing a delay in my Next.js 14 project when using revalidatePath. Here's what's happening:

- I have a component that creates a new experience and updates my database.
- After the update, my server action successfully calls revalidatePath to refresh the current URL.
- However, my UI's loading state stops loading before the revalidation occurs. This causes an unexpected visual delay for the user.
- As u see from the video there is like 1-2 second delay after the loading in the button is finished.
- This same kind behavior occurs in multiple part of my project, which includes UI update and database Update.

Is this normal behavior in Nextjs or am i facing some bug here?

'use client'
import * as React from 'react';
import { Button } from '@mantine/core';

interface CreateButtonProps<T> {
  createAction: (payload: T) => Promise<void>;
  initialPayload: T;
  label: string;
  onOpenDrawer?: () => void;
}

export function CreateButton<
  T extends {
    sortOrder?: number | null | undefined;
    resumeId?: string;
  },
>({
  createAction,
  initialPayload,
  label,

  ...props
}: CreateButtonProps<T>) {
  const [isLoading, setIsLoading] = React.useState<boolean>(false);
  async function onClick() {
    setIsLoading(true);
    await createAction(initialPayload);
    setIsLoading(false);
  }

  return (
    <Button
      onClick={onClick}
      disabled={isLoading}
      loading={isLoading}
      variant="light"
      {...props}
    >
      {label}
    </Button>
  );
}

Here is the server action

export async function createWorkExperience(
  formData: WorkExperienceType,
): Promise<void> {
  const workExperience = await db.workExperience.create({
    data: formData,
  });

  revalidatePath(`/resume/${workExperience.resumeId}`);
}