Load real LibreBible data in browser preview

src/App.tsx

@@ -29,6 +29,8 @@ function App() {
 
   async function runSearch(nextQuery = query) {
     setError(null)
+    const trimmed = nextQuery.trim()
+    setSelectedStrong(/^[gh]\d+$/i.test(trimmed) ? trimmed.toUpperCase() : null)
     const results = await searchVerses(nextQuery)
     setVerses(results)
     setSelectedId(results[0]?.id ?? null)
@@ -68,6 +70,7 @@ function App() {
       selectedVerse.strongs[0]
     )
   }, [selectedStrong, selectedVerse])
+  const visibleVerses = useMemo(() => verses.slice(0, 250), [verses])
 
   function searchStrong(strong: string) {
     setQuery(strong)
@@ -130,8 +133,10 @@ function App() {
         </section>
 
         <section className="result-list" aria-label="Search results">
-          <div className="section-title">{verses.length} verses</div>
-          {verses.map((verse) => (
+          <div className="section-title">
+            {verses.length} verses{verses.length > visibleVerses.length ? `, showing ${visibleVerses.length}` : ''}
+          </div>
+          {visibleVerses.map((verse) => (
             <button
               key={verse.id}
               className={verse.id === selectedVerse?.id ? 'result active' : 'result'}