All threads / Infinite Scroll in Rails with Stimulus.js Discussion

Ask A Question

Notifications

You鈥檙e not receiving notifications from this thread.

Infinite Scroll in Rails with Stimulus.js Discussion

This is super slick. I wonder how easily one could append the query parameter in the URL to reflect the current page? Could History.replaceState() handle the job?

Should be pretty easy. Once the AJAX request succeeds, you can update the URL with a pushState. I would imagine you'd want pushState so you don't clobber the previous URL and it would keep the history as if you clicked each link. 馃憤

Reply

This rocks, coupled it with my MessagesController for Group Chats to reduce some of the load for the larger chats with lots of messages.

Reply

So excited to see this episode. Saw it pop up on your Github a while back, and was excited to see the video.

Reply
Reply

Thanks @excid3, very neat :-) One comment though, as capturing scroll events like this is usually quite CPU-intensive, wouldn't it be better to use an IntersectionObserver? (https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver)

also see: https://m.signalvnoise.com/how-to-back-to-top-button-without-scroll-events/

I bet this could be a great way to improve that. 馃憤

Reply

Great episode. And a nice introduction to Stimulus.js to boot. One small comment, you may want to wrap the pagination area in a "display: none;" so it doesn't flash on the screen and isn't present when you hit the bottom.

Yup, definitely want to hide that navigation if you're using this for real. :)

Reply

For anyone implementing infinite scrolling behavior, I recommend checking out the method used by https://infinite-scroll.com

Instead of using JSON it uses regular HTML pages like you're already used to. No need to modify the controller or create a separate view template. Instead, they fetch the full http://localhost:3000/?page=2 (or whatever), but only use the content inside <div data-target="infinite-scroll.entries"> and append that to the existing div.

I thought it was a clever approach that feels very familiar as it reminds me of Turbolinks. There's very little setup and easy to maintain. With proper caching any performance hit is likely negligible.

I can see the strategy being used with only a slight modification of the code presented in the video.

Reply
Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 34,885+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.