My routes fetch a setting from a database for the user, which drives the kind of data to load in each of the routes.

I have three routes:
- /: server component that fetches its data via a function homeNews() that calls fetch()
- /news/category1: client component that uses react-query infinite loading. calls an api route, which calls a another function category1News() that calls fetch()
- /news/category2: client component that uses react-query infinite loading. calls an api route, which calls a another function category2News() that calls fetch()

In both /news/** routes, the setting is passed down from the server component page into the client component as a prop.

Each of these routes pulls from a different data source depending on that setting that gets loaded from the database. I have a server action that changes this setting.
In the server action, if I use revalidatePath('/') and I'm on /, the page refreshes and loads the updated data source.
If I attach a tag my-tag to each of the fetch() calls in the chain, navigate to /news/category1, then use the action to update the data source, call revalidateTag('my-tag'), the page doesn't refresh/revalidate.

My questions are:
- Do fetch tags not work when the fetch call is placed inside another function, rather than having the fetch call directly in the component?
- Is there a way to have a loading state when the page is revalidating? Currently it just hangs for a sec as if loading.tsx is missing.
- Do I just need to make three separate revalidatePath calls?