Revert Algolia lazy loading to fix search not appearing#364
Conversation
The lazy loading approach caused the search UI to not appear because the #autocomplete div was empty and invisible until user interaction triggered script loading. This broke discoverability since users couldn't see there was a search to click on. Reverts to the original defer-based loading which ensures Algolia initializes on DOMContentLoaded and the search UI is immediately visible.
✅ Deploy Preview for docs-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughWalkthroughThese changes simplify the Algolia script loading mechanism across two template files. The lazy-loading initialization that previously waited for script readiness, dispatched custom events on user interaction, and handled pending focus is replaced with a simpler approach: static script and stylesheet tags with deferred loading attributes, paired with a single DOMContentLoaded call to initialize Algolia. This removes approximately 94 lines of dynamic script management logic while consolidating the initialization to rely on built-in readiness checks within initAlgolia. Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Suggested reviewers
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Leaving this one up to @paulohtb6 for review :-) |
Never mind--I approved |
2 participants
Summary
https://deploy-preview-364--docs-ui.netlify.app/
#autocompletediv was empty and invisible until user interactiondefer-based script loading which ensures Algolia initializes onDOMContentLoadedProblem
The lazy loading approach required users to click on an invisible empty div to trigger script loading. Since there was no visual indicator, users couldn't discover the search functionality.
Solution
Revert to loading Algolia scripts with
deferattribute, which loads them asynchronously but initializes on DOMContentLoaded, making the search UI immediately visible.