react-notion-x
react-notion-x copied to clipboard
fix infinite loading issue in Search Dialog
trafficstars
Description
Fixes #593
When using the search functionality in react-notion-x, we identified a user experience issue: sometimes the loading icon continues to spin indefinitely when users enter content in the search dialog, even after the search request has successfully returned.
Solution
We resolved the infinite loading issue in the search dialog with the following improvements:
- replace
throttlewithdebounce:
- switched from throttle to debounce, which is more suitable for search scenarios
- added the
{trailing: true}option to ensure that a search is always executed after the user stops typing - this prevents multiple searches from being triggered when users type quickly, improving performance
- optimize query state management:
- store the current query for later comparison
- only update the UI state when the current query matches the query in the component state
- prevent old search results from overwriting newer ones, solving state synchronization issues
- improve error handling:
- add
try-catchblocks to capture errors that may occur during the search process
Notion Test Page ID
I directly provided the searchNotion function in /NotionPage.tsx to NotionRenderer, enabling the search component to display and fixing related issues.