Preventing Turbolinks from overwriting a partial rendered by Stimulus asynchronously

1

I’ll preface this by saying I’m new to Javascript, Turbolinks, and Stimulus.

Essentially I have a page that loads a base layout, then loads a table of data asynchronously via Stimulus. When I navigate back to that page the table is presented via Turbolinks cache, then the page is updated with the page load and obfuscates the table for a moment or two until the asynchronous request runs again and populates it. I’m sure there’s a way to make this all run smoothly so that we don’t flicker the table?

The table is within a div associated to a stimulus controller.

2

I probably should have done a little more research prior to posting. I still haven’t solved this issue, but I have found a somewhat cumbersome work around.

Essentially, I’m just setting assigning a class that sets the display to none when the Turbolinks before:cache even happens. See https://github.com/stimulusjs/stimulus/issues/104

This prevents the flickering, but also keeps me from seeing the benefits of the Turbolinks preview.