How to Avoid Content Flash when using the CMS Filter Attribute?

Attributes
1

Hey Finsweet Team and Community,

I’m currently using the CMS Filter Attributes, and I’m facing a small issue with content flashing on page load. When the page initially loads, for a brief moment, I can see the Initial State Div, the Empty State Div, and the CMS List all at once. However, I would like to ensure that only the Initial State is shown during the loading process, and the other elements are hidden until necessary.

Has anyone dealt with this issue before or know how to solve it? I’m looking for the best approach to avoid this flash and create a smoother user experience.

Any tips or advice would be greatly appreciated!

Thanks in advance! - Christian

2

Hey @juicydisorder!

For the Empty element, you can wrap it with a div set to display: none without affecting the function of this.

For the list, I am finding it a bit tricky simply with Attributes so you can add the hide class and then remove it once the script is loaded with this snippet

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsfilter',
    (filterInstances) => {
      console.log('cmsfilter Successfully loaded!');

      const [filterInstance] = filterInstances;
      const { listInstance } = filterInstance;
      listInstance.list.classList.remove('hide');
    },
  ]);
</script>