CMS Filter Active Tag Placeholder showing on page load

Attributes
1

I am encountering an issue on a page set up with many attributes (CMS Filter, Nest, Combine, Load, Sort).

Sometimes, the active tag placeholder div, which has the attribute “fs-cmsfilter-element = tag-template” applied, appears on page load and won’t disappear. It seems to be some sort of bug (see screenshot below). The same issue is happening with the empty state div, which has attribute “fs-cmsfilter-element=empty” applied.

In the instances where this occurs, these placeholder div blocks do not deactivate when you click the “x” or click “Clear All” or refresh the page.

This site is already live so any ideas on how to fix would be greatly appreciated!

Read Only Link:
https://preview.webflow.com/preview/insidetrack?utm_medium=preview_link&utm_source=designer&utm_content=insidetrack&preview=62e29e4f093b1097bf3346c9d4065c4a&pageId=64e11b2d49e674bb295b2863&workflow=preview

Screenshot of live site:

image1
image1750×1334 98.1 KB

2

Hey @Poetic, I’m afraid I can not replicate this issue on my end. I’ve tested on mobile and desktop with and without throttling the connection and both elements disappear as expected when the page finished loading.

3

Hi @Support-Luis and @Poetic ,
I´ve got the same problem. The tag-template shows up for a second on page load. And it is not hidden, when the list is empty.
Live Site: Second Hand Party

https://preview.webflow.com/preview/second-hand-party-wip?utm_medium=preview_link&utm_source=designer&utm_content=second-hand-party-wip&preview=142680d1a81ecbd24c7d5ecebcedd319&pageId=652443ad5faf118e55035f85&workflow=preview

Bildschirmfoto 2023-11-28 um 21.27.10
Bildschirmfoto 2023-11-28 um 21.27.101920×973 101 KB

4

Hey @Nils_dasda! You seem to have an empty collection in this page, as the fs-cmsfilter-element="list" is placed in the collection list, CMS Filter can not correctly initialize as the attribute is removed from the page by the empty state.

A fix for this would be to add the attribute to the collection wrapper. Can you test and let me know how it goes?

1 Like
5

Hey @Support-Luis thanks for the replay. Of course the tag-template is now hidden, when the collection list is empty. Great.
But is there also a solution for the page-load issue? So that the tag-template is not showing up for a second or more on page load?
Thank you for the help.

6

Hey @Nils_dasda! There is no native way to do this, however, you can add a wrapper div with a hide class, a unique id, and some simple JS that will remove this class from the element once CMS Load finishes loading.

This snippet will handle it

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsload',
    (listInstances) => {
      console.log('cmsload Successfully loaded!');
      const hiddenTagWrapper = document.getElementById('hide-this-on-load');
      hiddenTagWrapper.classList.remove('hide');
    },
  ]);
</script>