Optimize Pattern Library Searching

[iansvo]

Description

The pattern library search currently re-fetches requests on every search and changing categories feels slow. My thinking is that we can just load all of the patterns initially and then filter them client side to speed up the interaction.

We may need to test this out to see how it works with a large number of patterns. I can think of a few potential footguns here, namely the size of the request. Currently the request payload is beefy, coming in at around 427kb and 9 total requests just to open up the modal.

We need to streamline this to reduce the number of network requests and see what we can reasonably do to offload filtering and searching to the client, which should become progressively simpler as the filtered items are already lazy loaded themselves.

Technical Goals

• Reduce unnecessary re-renders and network requests
• Cache searches client side if possible (ex: using object key/value model)
• Eliminate multiple network requests when filtering categories or performing searches
• Consider implementing the new autocomplete component for searching
• Look at ways we can avoid a massive network request when there's a large number of patterns

UX Goals

• Ensure users can quickly search and filter patterns
• Ensure the search is as meaningful as it can be with our available data

[iansvo]

@tomusborne @diggeddy Do you guys have a good way to load up a remote library with a BUNCH of patterns? Like say 2-3 the current amount? They could all be duplicates really I just want a massive dataset to play with for testing and shit if I can.

[tomusborne]

@tomusborne @diggeddy Do you guys have a good way to load up a remote library with a BUNCH of patterns? Like say 2-3 the current amount? They could all be duplicates really I just want a massive dataset to play with for testing and shit if I can.

Maybe some sort of post duplicator? I would load up a handful of the pro patterns and then just duplicate them into oblivion. You may want to do it on a remote server to see the full performance impact.