Pass a loading prop to pages server components

[asnaeb]

It is known that awaiting for revalidatePath requires some trickery and that you need to use client components if you want to provide the user a loading indicator when server actions and revalidation is occurring. What if page.js|ts default export Components would have a loading prop passed to them when a server action is executing or a revalidation is in progress? This would greatly improve the amount of code needed to achieve a very common pattern: Mutate data on the server and showing loading information to the user until new data is available.

export default async function Page({loading}) { // <-- loading is true while any server action/revalidation is running 
  const items = await getItemsFromSomewhere();
  const action = async () => {
    "use server";
    await mutateItems();
    revalidatePath("/path/of/this/page");
  };
  return <div>
    <ul className={loading ? "loading" : ""}>
      {items.map(item => <li key={item.id}>{item.description}</li>)}
    </ul>
    <form action={action}>
      <button>Mutate items</button>
    </form>
  </div>
}

Going even further, server actions could be assigned ids and loading prop would be an array of ids with the current running actions, which applied to the above snippet would become

const mutateItemsActionId = "some-custom-id";
export default async function Page({loading}) { // <-- loading is an array of strings
  const items = await getItemsFromSomewhere();
  const action = async (data, context) => {
    "use server";
    context.setId(mutateItemsActionId);
    await mutateItems();
    revalidatePath("/path/of/this/page");
  };
  return <div>
    <ul className={loading.includes(mutateItemsActionId) ? "loading" : ""}>
      {items.map(item => <li key={item.id}>{item.description}</li>)}
    </ul>
    <form action={action}>
      <button>Mutate items</button>
    </form>
  </div>
}

This would allow for very fine grained control over server actions feedback, and reduce the need for client components while providing a great DX. I have not enough knowledge of nextjs's source code to tell if this is even feasible though.