From dc003a6ada427bcfe900ab845d1d04ed4dafbc9e Mon Sep 17 00:00:00 2001
From: Matthew Penner <me@matthewp.io>
Date: Tue, 16 Feb 2021 13:23:24 -0700
Subject: [PATCH] admin(ui): SearchableSelect - differentiate between loading
 and no items

---
 .../components/admin/nodes/DatabaseSelect.tsx      |  4 ++--
 .../components/admin/nodes/LocationSelect.tsx      |  4 ++--
 .../components/elements/SearchableSelect.tsx       | 14 +++++++-------
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/resources/scripts/components/admin/nodes/DatabaseSelect.tsx b/resources/scripts/components/admin/nodes/DatabaseSelect.tsx
index dc8871550..c377b46d4 100644
--- a/resources/scripts/components/admin/nodes/DatabaseSelect.tsx
+++ b/resources/scripts/components/admin/nodes/DatabaseSelect.tsx
@@ -8,7 +8,7 @@ export default ({ selected }: { selected: Database | null }) => {
     const context = useFormikContext();
 
     const [ database, setDatabase ] = useState<Database | null>(selected);
-    const [ databases, setDatabases ] = useState<Database[]>([]);
+    const [ databases, setDatabases ] = useState<Database[] | null>(null);
 
     const onSearch = (query: string): Promise<void> => {
         return new Promise((resolve, reject) => {
@@ -40,7 +40,7 @@ export default ({ selected }: { selected: Database | null }) => {
             getSelectedText={getSelectedText}
             nullable
         >
-            {databases.map(d => (
+            {databases?.map(d => (
                 <Option key={d.id} selectId="database" id={d.id} item={d} active={d.id === database?.id}>
                     {d.name}
                 </Option>
diff --git a/resources/scripts/components/admin/nodes/LocationSelect.tsx b/resources/scripts/components/admin/nodes/LocationSelect.tsx
index 1da1e5d04..db9fc646d 100644
--- a/resources/scripts/components/admin/nodes/LocationSelect.tsx
+++ b/resources/scripts/components/admin/nodes/LocationSelect.tsx
@@ -8,7 +8,7 @@ export default ({ selected }: { selected: Location | null }) => {
     const context = useFormikContext();
 
     const [ location, setLocation ] = useState<Location | null>(selected);
-    const [ locations, setLocations ] = useState<Location[]>([]);
+    const [ locations, setLocations ] = useState<Location[] | null>(null);
 
     const onSearch = (query: string): Promise<void> => {
         return new Promise((resolve, reject) => {
@@ -40,7 +40,7 @@ export default ({ selected }: { selected: Location | null }) => {
             getSelectedText={getSelectedText}
             nullable
         >
-            {locations.map(d => (
+            {locations?.map(d => (
                 <Option key={d.id} selectId="location" id={d.id} item={d} active={d.id === location?.id}>
                     {d.short}
                 </Option>
diff --git a/resources/scripts/components/elements/SearchableSelect.tsx b/resources/scripts/components/elements/SearchableSelect.tsx
index c0b7e6ee7..1206b2fbc 100644
--- a/resources/scripts/components/elements/SearchableSelect.tsx
+++ b/resources/scripts/components/elements/SearchableSelect.tsx
@@ -18,8 +18,8 @@ interface SearchableSelectProps<T> {
 
     selected: T | null;
 
-    items: T[];
-    setItems: (items: T[]) => void;
+    items: T[] | null;
+    setItems: (items: T[] | null) => void;
 
     onSearch: (query: string) => Promise<void>;
     onSelect: (item: T | null) => void;
@@ -40,7 +40,7 @@ function SearchableSelect<T> ({ id, name, selected, items, setItems, onSearch, o
 
     const onFocus = () => {
         setInputText('');
-        setItems([]);
+        setItems(null);
         setExpanded(true);
     };
 
@@ -55,13 +55,13 @@ function SearchableSelect<T> ({ id, name, selected, items, setItems, onSearch, o
         }
 
         if (query === '' || query.length < 2) {
-            setItems([]);
+            setItems(null);
             return;
         }
 
         setLoading(true);
         onSearch(query).then(() => setLoading(false));
-    }, 1000);
+    }, 250);
 
     useEffect(() => {
         setInputText(getSelectedText(selected) || '');
@@ -151,8 +151,8 @@ function SearchableSelect<T> ({ id, name, selected, items, setItems, onSearch, o
                 </div>
 
                 <Dropdown ref={itemsList} expanded={expanded}>
-                    { items.length < 1 ?
-                        inputText.length < 2 ?
+                    { items === null || items.length < 1 ?
+                        items === null || inputText.length < 2 ?
                             <div css={tw`flex flex-row items-center h-10 px-3`}>
                                 <p css={tw`text-sm`}>Please type 2 or more characters.</p>
                             </div>