Javascript not being run on editor settings change

Technical Q&A
1

I’m currently developing my first shopify theme and found a bug in the way that the theme editor works. I currently have a loading animation that pops in when an image first shows on the page and am detecting it using IntersectionObserver, but if the user modifies any settings to do with the images it will also not run the javascript again and makes the images not show till the page is reloaded. My biggest worry is that this bug would add confusion to the end user of the theme as they might end up thinking that the page is supposed to look like it is has a colored block when that setting is changed

loading properly

lukemckeen_0-1621174183262.png
lukemckeen_0-1621174183262.png431×592 262 KB

after modifying any of the settings in the editor

lukemckeen_1-1621174253153.png
lukemckeen_1-1621174253153.png433×593 200 Bytes

2

When you adjust settings in the theme editor the dom is updated, and likely the parts your observer where looking at no longer exist. Are you running the observer again? Are you sure the elements it’s targetting still exist?

3

yup the elements all exist as expected, the problem is that I only run the IntersectionObserver code once and then clean it up as it no longer needs to observe anymore. This causes an issue because the css that im modifying is returned to its initial state and the js is not also returning to the initial state and running again