why would it?

loading.tsx only applies when the dom is changing

But as it is a suspense boundary it should trigger when we fetch something related to the query parameter. Some part of the dom is changing when the query is rerun?
For example currency parameter, the prices will change based on it!

query parameter has nothing to do with it

when the component is rerendering cause of a state change then it will trigger the suspense

for example: revalidatePath passes a prop to the clientside and a useEffect checks for the propchange and sets a state that is displayed on the return

react will automatically reload that component

loading.tsx triggers

But the query param is itself a state if I’m not wrong
I’m using the state from the url to refetch using trpc
So I believe it counts as state change as well?

äh depends on how u use your query param

if u use it within a hook

then yes

are u using useSearchParams

basically this, trpc which is wrapper of react query
and yes, useSearchParams is used

hm

did u check if the values change

example: rooms

or end_date

just console.log the values without useEffect

For now I'm checking the currency only
and yes, its changing
as it is suspended query, I believe it it should trigger the loading

yeah it should

if the values change

is your loading.tsx working correctl tho?

somewhere in your page

its working when I reload the page, or load the page the first time
so can confirm it works

strange

try wrapping it with suspense manually

otherwise i dont know

never faced something similar

Wrapping suspense manually, loses the feature of having loading.tsx in the first place, right?

nope it just overwrites it

for that component

also found this, but its quite confusing https://github.com/vercel/next.js/issues/53543

mind hopping in a screenshare and i try to fix it

maybe its better when i directly face the problem

helped a bunch of people like this with weird bugs

wait, give me sometime

wait a sec

get this and tell me your code

1660457197

@gin joining?

yea

only give me mouse and keyboard

remove every permissionm

wait

remove everything except mouse and keyboard

perms

check

wait check the /rooms page

wait let me do it

dont use your keyboard

show me where it dont work

wait

i see so the state is changing but no loading ui

correct

can u zoom in or something

wehy is trpc not working

let me check

one monebnt

okay CMS is down :(((((((((((

LMAOOO

i was saying

can u turn it back on?

nope, cannot

no control on me

we was about to fix it

unlucky

yeah sry we cant do aynthing rn while its down

i disconnect for now tell me when its back up

sure

i'll ping you up

what were you trying at last though, I'm curious 😄

i was trying to trigger a complete rerender of the route

u can do that using a pseudo server action doing nothing

its a trick in my book

its a passive rerender without reloading the page completely

just mutates the data

and that triggers suspense aswell

Okay, so the revalidate path value will be the url of the current path?

Hmm that makes sense
Call a server action just to trigger a suspense is neat

revalidatePath clears the router cache of the given path

for example lets say a ssr component fetched data and passes it to the client

So won’t it be revalidatePath(“/rooms”)

triggering revalidatePath mutates the data

yeah

Got it
Okay understood now, bad luck server went out 🙁

So can we call the formAction without a form?

yup

okay, lets see when server gets back

@gin server up, let me know when you're available!

issue fixed?

Hey man, instead of using router push I checked that if I used the browser API of history pushState then it’s working as expected
So I guess it’s the one way, coz revalidatePath also doesn’t trigger the loading!

alr

nice

@joulev so will pass the loading component from the loading file itself?

The loading file is just an implicit Suspense boundary, so since here we are using an explicit Suspense boundary we no longer need that loading.tsx file. The loading component can be imported from anywhere.

Hmm, that makes sense
I believe then it will also trigger with cookie change as well! 🤔

Suspense only works when it is first mounted. if the page is simply rerendered such as when you change the cookies in a server action, you probably need a key to force trigger Suspense as well.

@joulev I dont think the key works tbh
what I did, is JSON.stingyfy the cookie then add it as key to the suspense
but still the data is updated with no suspense being triggered

i'll need to see some code. how do you add the cookies?

btw if you are using a server action to set cookies, you can do

const [isPending, startTransition] = useTransition()
startTransition(() => serverAction())

and use the isPending state to render a loading state

this is the cookie setting
not from a server action

so you just set it from the client side?

yes, from a drawer only

then the cookie change should be instantaneous and doesn't reload any page, so a loading screen doesn't make sense...

that's effectively just document.cookie = ..., react doesn't even know you have a new cookie

if you want to reload the page you probably have something like router.refresh() in there?

yeah, I've router.refresh() but it doest reload the page
this is the full implementation

Even I tried to put currency to the query params, still same
no loading

with router.refresh then you can just

const [isPending, startTransition] = useTransition()
startTransition(() => router.refresh())

Nope, no matter what
i cannot make the loading screen appear 😦

* example: https://github.com/joulev/debug/tree/nextjs-trigger-loading-state-at-will-Mainak
* deployment: https://debug-git-nextjs-trigger-loading-state-at-wi-63d965-joulev-proj.vercel.app/

Hmm, I think I understand it now
I think this lib is to blame for https://www.npmjs.com/package/cookies-next

sometimes I need cookie in client component as well, thats why used the lib^

no it's not to blame, it is the same as this line

document.cookie = `foo=${new Date().toISOString()}`;

just with extra features. i didn't use it because not necessary to install a dependency for the example.

the important part here is that you read the cookies and use it as the key for Suspense. when the key changes, Suspense will be re-triggered.

i'm not setting the cookie with that, I'm actually using getCookie

Yes can confirm, that is the issue^
now I did it with next cookies, and works as expected 😮