I am using Finsweets Combined CMS to combine 2 Lists, in total 110+ items. I have designed a Search Bar to be used in the top part of my website.
Finsweet offers CMS Filter functionality, that allows your CMS List to have an initial state of 0 filtered items, to begin with. As soon as people start interacting with the filters you have created, the list starts showing relevant items, based on the filter input.
Issue
But here’s my problem: in this current situation, although the initial state visually doesn’t show any items, they (110+ CMS items) are still loaded into the DOM.
Similarly, when you search for something using my Search Bar, you can see that all other CMS items are removed from the page - they are no longer there. The only items that show are the ones matching your search query, and I guess if you could replicate this on page load, you would prevent 110+ items from loading in whilst you only need the items to be loaded in when people insert the search query.
Goal
What I would like to achieve is to have the page load with an “empty” state. So, have 0 items load in the page on page load, and when people interact with the filters, items load in based on filter input.
TLDR
Can I prevent all Combined CMS items from loading into the page, and only load them when I interact with the filters? Using Finsweet.
The first page loads all items as display:none, the second is a page with a predefined “heren” search query added to URL that filters 14 items into the page.
I am seeing a performance drop on the second URL, whilst I would assume that because it’s loading only 14 instead of 110+, I would see increased performance on the second URL.
I thought items that are in display:none are still being loaded? I am confused now, perhaps someone with more knowledge of DOM loading etc. can help out!
Just to clarify, do you mean prevent them from being visible (instead of loading - not sure if it’s the same) until you type in the filter? If so I did this recently;
Create a div for initial state (blank, 100% width)
Under custom attribute, apply “fs-cmsfilter-element=initial”
Thanks a bunch for taking the time. Yes, this is what I did. This actually works very well, but the page still loads all your CMS items, but in a hidden state (unless I am wrong and missing something). And then when you interact with the filter, the items that match the filter are shown.
So if you look at your developer console, and you open your Collection List, on page load it shows 110 items. And when you filter, it shows (for example) 4 items.
I would like, on page load, to have 0 items, and when you apply a filter, it shows the 4 items (for example).
Webflow does not offer dynamic server side rendering, So the DOM has to be populated with the collection data for it to be manipulated via client side JavaScript or just rendered normally. Webflow pages are generated statically and this is how it works.
It is possible to use a third party data source and pull in data with custom code. Look at XANO for example of what I am talking about. Connect to Webflow | Xano
Thanks for taking the time. I get what you mean. Would it be possible to use lazy-loading in this instance? To somehow prevent everything from being loaded unnecessary? I’m out of my field here so I’m not sure if what I’m saying is even making sense. I tried searching about lazy-loading but only found resources regarding image-lazy-loading.
