From 6b7030d617091ced3ad1ef08ac74f62fcfe3e193 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam.fitzgerald@tlon.io>
Date: Fri, 2 Jul 2021 15:42:17 +1000
Subject: [PATCH] interface: omnibox go fast

---
 .../src/views/components/leap/Omnibox.tsx       | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/pkg/interface/src/views/components/leap/Omnibox.tsx b/pkg/interface/src/views/components/leap/Omnibox.tsx
index c2500bf709..d50cbdeb06 100644
--- a/pkg/interface/src/views/components/leap/Omnibox.tsx
+++ b/pkg/interface/src/views/components/leap/Omnibox.tsx
@@ -1,6 +1,8 @@
 import { Box, Row, Text } from '@tlon/indigo-react';
 import { omit } from 'lodash';
 import Mousetrap from 'mousetrap';
+import _ from 'lodash';
+import f from 'lodash/fp';
 import React, {
   ReactElement, useCallback,
   useEffect, useMemo,
@@ -41,6 +43,7 @@ const SEARCHED_CATEGORIES = [
   'apps'
 ];
 const settingsSel = (s: SettingsState) => s.leap;
+const CAT_LIMIT = 6;
 
 export function Omnibox(props: OmniboxProps): ReactElement {
   const location = useLocation();
@@ -175,7 +178,7 @@ export function Omnibox(props: OmniboxProps): ReactElement {
   );
 
   const setPreviousSelected = useCallback(() => {
-    const flattenedResults = Array.from(results.values()).flat();
+    const flattenedResults = Array.from(results.values()).map(f.take(CAT_LIMIT)).flat();
     const totalLength = flattenedResults.length;
     if (selected.length) {
       const currentIndex = flattenedResults.indexOf(
@@ -198,7 +201,7 @@ export function Omnibox(props: OmniboxProps): ReactElement {
   }, [results, selected]);
 
   const setNextSelected = useCallback(() => {
-    const flattenedResults = Array.from(results.values()).flat();
+    const flattenedResults = Array.from(results.values()).map(f.take(CAT_LIMIT)).flat();
     if (selected.length) {
       const currentIndex = flattenedResults.indexOf(
         // @ts-ignore unclear how to give this spread a return signature
@@ -309,13 +312,15 @@ export function Omnibox(props: OmniboxProps): ReactElement {
     return (
       <Box
         maxHeight={['200px', '400px']}
-        overflowY='auto'
-        overflowX='hidden'
+        overflow='hidden'
         borderBottomLeftRadius={2}
         borderBottomRightRadius={2}
       >
         {SEARCHED_CATEGORIES.map(category =>
-          Object({ category, categoryResults: results.get(category) })
+          Object({
+            category,
+            categoryResults: _.take(results.get(category).sort(sortResults), CAT_LIMIT)
+          })
         )
           .filter(category => category.categoryResults.length > 0)
           .map(({ category, categoryResults }, i) => {
@@ -331,7 +336,7 @@ export function Omnibox(props: OmniboxProps): ReactElement {
             return (
               <Box key={i} width='max(50vw, 300px)' maxWidth='700px'>
                 {categoryTitle}
-                {categoryResults.sort(sortResults).map((result, i2) => (
+                {categoryResults.map((result, i2) => (
                   <OmniboxResult
                     key={i2}
                     // @ts-ignore withHovering doesn't pass props