Nextjs13 revalidateTag Loading Modal while waiting for revalidation

Question

Got a quick question for you. I'm working on a Next.js frontend app hooked up to a Flask backend. So, I'm triggering a server action when a button is clicked, using the startTransition() function. That action includes a revalidateTag once the data is fetched (I'll share the code below). Now, I'd like to display a Loading modal component. The thing is, the revalidation affects data used in a drawer component, and I want the user to chill while the revalidation is underway – all while keeping them in the loop. To wrap it up, i am looking for a way to await validation. Cheers!

Here i am starting my action, and while pending, my Loading modal is present, but the problem is that it is only present while the action is fetching data, when its done, and revalidation starts, modal is gone and i am not sure how to call it while my revalidation is on going.

 startTransition(() =>
      deleteSources(email, selectedChannelIds)
    );
 {isPending && <LoadingModal />}

Action called

export async function deleteSources(
  email: string,
  channels: WorkspaceChannel[]
) {
  const res = await fetch(
    `https://someroute/test/leave_channels/${email}`,
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(channels),
    }
  );
  revalidateTag('groups');
}

I have tried everything i found, but i did not found anything relevant.