Loading animation for slow collection list search?

Design help General
1

We have ~1200 products in a collection list. Since it takes Webflow search awhile to go through all the records, our “Product Empty Default” component for empty state is showing “No results found” before everything is finished searching.

We want it instead to say “Searching…” until we know the search is finished – otherwise, users are assuming there are no results and changing the search or the page.

Whether we use Webflow interactions or a script, checking the length of the collection item won’t work, since it remains ‘0’ until results are found-- it’s the same problem.

Since Webflow doesn’t provide any direct event or trigger for “Collection List finished loading,” would we need to use the API to implement a solution?

It’s probably something that affects others, so I’m hoping there’s a better way.

I read about

Here is my site Read-Only: LINK
Webflow url: https://bigbeartools.webflow.io

2

Webflow doesn’t have a collection-list-based search feature.
Are you thinking of Finsweet CMS Filter, or possibly Jetboost?

1 Like
4

We have Site Indexing enabled on our Product Template, so all the products are in the search index. It really does work, but it’s just slow.

If we could get “still loading” to work, it would be alright, but we might look for another solution.

5

It wouldn’t be difficult to build a “still loading” feature, look into mutation observers, you’ll be able to tell when Webflow has loaded the search results.

But your description above doesn’t quite match. 1200 items shouldn’t be relevant to the search, everything is pre-indexed, so I think you’re doing something different here. If you’ve had someone else design your search feature for you, look into the code, it sounds very much like a Finsweet CMS filter + CMS load setup since you mentioned you’re working with a collection list.

6

Heheh, I just found this in the settings for multiple pages:

<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsnest@1/cmsnest.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-selectcustom@1/selectcustom.js"></script>
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsselect@1/cmsselect.js"></script>

Now that I know what I’m working with, I’ll look into finsweet some more!

Thank you

7

CMS Nest in particular is known for some performance challenges, because of the way it organizes and accesses data. If you had a full collection list with 100 items and containing FS-Nest-populated nested lists, a first time visitor might easily need to download 101 HTML page to populate that first page they’re viewing.

1 Like
8

Thank you, @memetican … that’s certainly what’s happening.

It’s not bad at all, except for saying “No results found” instead of “Still searching” until everything’s finished.

I think I need to use the Finsweet Attributes API to trigger an Interaction when FS is finished searching.

However, I suspect there’s an easier way. I haven’t found the empty state in Webflow, so maybe it’s coming from FS? Here’s the rendered code:

<div class="product_wrapper w-dyn-list">
    <div fs-cmsnest-element="list" fs-cmsfilter-element="list" fs-cmsload-element="list" fs-cmsload-mode="pagination" role="list" class="product_list w-dyn-items" style="opacity: 1; display: none;"></div>
    <div fs-cmsfilter-element="empty" class="product_main-empty" style="opacity: 1;">
        <div class="heading-style-h2">No results found.</div>
        <p class="text-style-muted">Please try different keywords and/or filters.</p>
    </div>

It must be a common situation…

I’ll keep digging !

9

That’s a Finsweet construction, you’ll find it in the docs.