I’m trying to implement spinners while content is loading in the server. It works if done like this:
- Form POSTs to server
- Respond with
<turbo-stream>(s) containing<turbo-frames>withsrc=attributes pointing at other endpoints that serve the data for those spinners - Enjoy your fully loaded page
Everything is loaded and I have some turbo frames with content. Let’s say there are two frames
<id = "main-content-frame"><id = "similar-ids-table">
Now, I want to click on a link in similar-ids-table and just replace the content in main-content-frame. I’m doing this
- Send GET to server
- Respond with a similar spinner as in the original point 2 above
<turbo-frame src="...">pointing at the endpoint that serves data -
<turbo-frame id = "main-content-frame">is replaced with the new content - Rinse and repeat
this is not working. Turbo is stuck in the spinner and the src never changes to final endpoint (It works if I change it by hand in the inspector). The spinner itself should be pointing a the correct endpoint as its src (remember, it worked in the beginning when it was initially put on the page via the stream – I’m reusing the exact same code, but the first one arrives on the page via a stream, while the second is part of a frame). I can see the server is working and producing the correct frame (it’s literally the same as the first attempt that worked).
So it seems Turbo is not able to chain requests? I can imagine this is just how the web works and I would be better off using the busy attribute to show a spinner – need to learn how to do that tho, thus my attempt first as described above.
This works for now
turbo-frame[busy] {
filter: blur(4px);
}