I have an eager loading turbo frame on a page and it works reliably.
<%= turbo_frame_tag 'example', src: example_path %>)
Now I decided to put another eager loading turbo frame on another part of the same page.
Now, when the page loads, only either one of the frame gets loaded with 200.
The browser network tab shows the other frame gets 302 response and the request doesn’t hit the server.
The frame that makes the request first seems to be not deterministic (not necessarily in the order listed in the dom).
Seems like I can work around this by making either one
loading="lazy" but I would rather load both frames as soon as possible.
I am only experimenting this on my development environment, so I am not sure if this is an issue with how the web server handles requests.
I will appreciate any help or suggestions.
Can you share a repo example of this?
Thank you for your attention and I apologize for the delay.
I found out that the issue was with my code and not turbo frame (phew…)
The issue was with a race condition around a resource.
The controller has an
around_action :lock_order that places a lock on the “order” resource for all actions in the controller. When two eager loading turbo frames hit the server at almost the same time, each request calls the
lock_order in succession. It happens that only one succeeds in getting the lock and the other one fails. The lock_order action forces a redirect upon such a failure, so the second request didn’t return the expected result. The order of requests varied, so it appeared to fail in random fashion.
My solution to this problem was to add
skip_around_action :lock_order, only: [:eager_load_resource_1, :eager_load_resource_2]
For me, Hotwire and turbo_frame and stimulus in particular have been a life saver and have greatly increased my productivity. I am no longer required to introduce another js framework on top of Rails and that has changed everything I do.
Again, thank you for your attention, thank you for the great community, and hope this will help others in similar situation!