Why can't loading.js files read URL params or searchParams?
Unanswered
Plague posted this in #help-forum
PlagueOP
I was disappointed to see that in the docs it says Loading UI components do not accept any parameters, I was hoping they would be able to read URL params and searchParams similar to page components since the Loading UI is initiated after the request that contains the URL.
If this isn't technically possible I understand, but, if it is I would definitely like to see this feature be added to the loading.js files.
Currently, I'm getting around it by using the "use client" directive and then calling usePathname() to read the params. Which works perfectly fine, just not ideal for it to be a client component for something that should be accessible on the server-side afaik.
In my case, the UI that is being shown is based off a selected category (dynamic route) and I want the Loading UI to reflect that as well, so this was my only option since I obviously do not want to fetch the category in my Loading UI.
If this isn't technically possible I understand, but, if it is I would definitely like to see this feature be added to the loading.js files.
Currently, I'm getting around it by using the "use client" directive and then calling usePathname() to read the params. Which works perfectly fine, just not ideal for it to be a client component for something that should be accessible on the server-side afaik.
In my case, the UI that is being shown is based off a selected category (dynamic route) and I want the Loading UI to reflect that as well, so this was my only option since I obviously do not want to fetch the category in my Loading UI.
5 Replies
@Plague I was disappointed to see that in the docs it says Loading UI components do not accept any parameters, I was hoping they would be able to read URL params and searchParams similar to page components since the Loading UI is initiated after the request that contains the URL.
If this isn't technically possible I understand, but, if it is I would definitely like to see this feature be added to the loading.js files.
Currently, I'm getting around it by using the "use client" directive and then calling usePathname() to read the params. Which works perfectly fine, just not ideal for it to be a client component for something that should be accessible on the server-side afaik.
In my case, the UI that is being shown is based off a selected category (dynamic route) and I want the Loading UI to reflect that as well, so this was my only option since I obviously do not want to fetch the category in my Loading UI.
Sun bear
You can use
// read search params
<Suspense
fallback={<CustomLoading searchParams={searchParams} />}
key={searchParams}>
<ServersideFetchingComponent searchParams={searchParams} />
</ Suspense>PlagueOP
I think you misunderstood my question. I solved my problem, I’m just asking why a feature that I think should exist doesn’t exist.
it is technically possible yes, since loading.js files are page-specific (not layout-specific) so it's entirely possible for them to receive the
params prop. though it isn't implemented yet. i myself would love to see this too.i suggest you open a feature request in the nextjs repository