# Turbo causing page flicker

**URL:** <https://discuss.hotwired.dev/t/turbo-causing-page-flicker/6111>\
**Category:** General\
**Created:** [December 7, 2024, 10:23pm UTC](https://discuss.hotwired.dev/t/turbo-causing-page-flicker/6111 "2024-12-07T22:23:50Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![joshuacronemeyer](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/joshuacronemeyer/32/3957_2.png) [@joshuacronemeyer](https://discuss.hotwired.dev/u/joshuacronemeyer)\
**Post date:** [December 7, 2024, 10:23pm UTC](https://discuss.hotwired.dev/t/turbo-causing-page-flicker/6111/1 "2024-12-07T22:23:50Z")

</div>

Hi all I have a rails 7.2.2 app setup using importmaps and the default turbo setup. The behavior I am trying to understand is as follows:

I have an index page of Posts (/posts) with a search form. It has a mapbox.js map on it that is controlled by a stimulus controller called MapController. Running a search works fine and turbo fires (/posts?q=mypost) and renders the matching posts. But when I click a top level navigation link\_to back to posts\_path (/posts) MapController’s connect function is called twice causing the map to flicker.

My understanding of this is that turbo drive renders a preview of the previously cached /posts html since i’ve already been there and connect() gets called after the preview loads. THEN when turbo gets the updated response for (/posts) connect() gets called again even though the result was probably the same as the cached preview.

Clearly the way i’m using things this is expected behavior. The solution I was thinking of was I could perhaps have some hash of the post objects on the page so that I could add a guard clause inside MapController.js connect() function and not have the mapbox map reload if the hash hasn’t changed, but it seemed complicated and I thought I might be missing something basic about the Turbo and Stimulus lifecycle that could help me here.

Curious to know best practices for this kind of thing.

---

<div class="post-metadata">

**Author:** ![jch](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/jch/32/3916_2.png) [@jch](https://discuss.hotwired.dev/u/jch)\
**Post date:** [December 10, 2024, 6:55pm UTC](https://discuss.hotwired.dev/t/turbo-causing-page-flicker/6111/2 "2024-12-10T18:55:35Z")

</div>

I ran into a similar issue with a chartjs canvas. My solution was to add `data-turbo-permanent` on the flickering element and refresh the element with the stimulus controller in the `connect` callback. You can see it in [jch.app](https://jch.app/u/demo), view source and look for the `id="networthChartContainer"` and `networth_chart_controller.js` for the stimulus controller.