Currently, I am in the process of developing a website for a major company that specializes in selling various goods. The website boasts an extensive catalogue with numerous search options and filters, which unfortunately take some time to compute and render (about 1-2 seconds). Despite my efforts, I am unable to speed up this process any further as each filter needs to be meticulously checked in order to provide accurate results.
Whenever I click on a checkbox to apply a filter, the website freezes (according to the Performance tab in Chrome Dev Tools, the JS engine is highly occupied). This concerns me because users may get impatient and repeatedly click on filters while the system is still processing, resulting in frustration when no filter is actually applied. I attempted to use a new Promise to wrap the time-consuming operations, but it did not improve the responsiveness and continued to freeze the browser.
Therefore, I have two questions:
- Is there a way to prevent user input while Vue is computing the results (perhaps display a "loading" screen)? My attempts to do so by including specific instructions at the beginning of the method/computed and before the function body were unsuccessful.
- If I were to implement server-side rendering with Vue, how would it impact the situation? Would it still freeze for a second while waiting for server response, or would it behave more like a
Promisefunction?
I hope I have effectively articulated the issue. If there are any details that I have overlooked, please let me know so that I can address them accordingly.