Ux/fix spinner searchable select (#1204)

* [components] Add no result state to story * [components] Removing spinner and fix flickering
sanity-io · Feb 18, 2019 · 356b60f · 356b60f
1 parent d5099ac
commit 356b60f
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 29 deletions.
diff --git a/packages/@sanity/components/src/selects/SearchableSelect.js b/packages/@sanity/components/src/selects/SearchableSelect.js
@@ -40,7 +40,6 @@ export default class SearchableSelect extends React.PureComponent {
       isOpen: false,
       highlightIndex: -1,
       isInputSelected: false,
-      arrowNavigationPosition: 0,
       hasFocus: false
     }
   }

diff --git a/packages/@sanity/components/src/selects/StatelessSearchableSelect.js b/packages/@sanity/components/src/selects/StatelessSearchableSelect.js
@@ -172,15 +172,14 @@ export default class StatelessSearchableSelect extends React.PureComponent {
                 readOnly={readOnly}
               />
               <div className={styles.functions}>
-                {openItemElement &&
-                  value && <span className={styles.openItem}>{openItemElement(value)}</span>}
-                {!readOnly &&
-                  onClear &&
-                  value && (
-                    <button type="button" className={styles.clearButton} onClick={onClear}>
-                      <CloseIcon color="inherit" />
-                    </button>
-                  )}
+                {openItemElement && value && (
+                  <span className={styles.openItem}>{openItemElement(value)}</span>
+                )}
+                {!readOnly && onClear && value && (
+                  <button type="button" className={styles.clearButton} onClick={onClear}>
+                    <CloseIcon color="inherit" />
+                  </button>
+                )}
                 {!readOnly && (
                   <div className={styles.arrowAndSpinnerContainer}>
                     {!isLoading && (
@@ -238,18 +237,23 @@ export default class StatelessSearchableSelect extends React.PureComponent {
                       <CaptureOutsideClicks
                         onClickOutside={isActive && isOpen ? this.handleClose : undefined}
                       >
-                        <div className={styles.listContainer}>
+                        <div
+                          className={
+                            items.length === 0 ? styles.listContainerNoResult : styles.listContainer
+                          }
+                        >
                           <Escapable
                             onEscape={event => (isActive || event.shiftKey) && this.handleClose()}
                           />
-                          {items.length === 0 &&
-                            !isLoading && <p className={styles.noResultText}>No results</p>}
-                          {items.length === 0 &&
-                            isLoading && (
-                              <div className={styles.listSpinner}>
-                                <Spinner message="Loading items…" />
-                              </div>
-                            )}
+                          <div
+                            className={
+                              items.length === 0 && !isLoading
+                                ? styles.noResultText
+                                : styles.noResultTextHidden
+                            }
+                          >
+                            No results
+                          </div>
                           {items.length > 0 && (
                             <SelectMenu
                               items={items}

diff --git a/packages/@sanity/components/src/selects/story.js b/packages/@sanity/components/src/selects/story.js
@@ -149,7 +149,10 @@ storiesOf('Selects')
         max: items.length,
         step: 1
       })
-      const selectedItem = items[selected]
+
+      const hasItems = boolean('hasItems', false, 'test') || undefined
+
+      const selectedItem = (items && items[selected]) || undefined
       return (
         <div style={{minWidth: '320px', ...centerStyle}}>
           <Sanity part="part:@sanity/components/selects/searchable" propTables={[SearchableSelect]}>
@@ -160,10 +163,10 @@ storiesOf('Selects')
               onFocus={action('onFocus')}
               onBlur={action('onBlur')}
               onOpen={action('onOpen')}
-              value={selectedItem}
+              value={hasItems && selectedItem}
               inputValue={text('Inputvalue', selectedItem && selectedItem.title, 'props')}
               renderItem={renderItem}
-              items={items}
+              items={hasItems && items}
               isLoading={boolean('isLoading', false, 'props')}
               disabled={boolean('disabled (prop)', false, 'props')}
               onClear={hasOnclear ? action('onClear') : undefined}

diff --git a/packages/@sanity/components/src/selects/styles/SearchableSelect.css b/packages/@sanity/components/src/selects/styles/SearchableSelect.css
@@ -62,11 +62,18 @@
 .listContainer {
   composes: shadow-24dp from "part:@sanity/base/theme/shadows-style";
   display: block;
+  min-height: 3.5rem;
   max-height: 20rem;
   overflow: auto;
   border: 1px solid var(--component-border-color);
   box-sizing: border-box;
   background-color: var(--component-bg);
+  transition: max-height 100ms linear;
+}
+
+.listContainerNoResult {
+  composes: listContainer;
+  max-height: 4rem;
 }
 
 .listContainerHidden {
@@ -75,9 +82,18 @@
 }
 
 .noResultText {
-  text-align: center;
-  padding: 0.5em;
-  opacity: 0.5;
+  position: absolute;
+  width: 100%;
+  opacity: 1;
+  padding: var(--medium-padding);
+  transition: opacity 100ms ease-out;
+  transition-delay: 100ms;
+}
+
+.noResultTextHidden {
+  composes: noResultText;
+  transition: none;
+  opacity: 0;
 }
 
 .spinner {
@@ -135,10 +151,6 @@
   }
 }
 
-.listSpinner {
-  opacity: 0.5;
-}
-
 .clearButton {
   composes: textInput from 'part:@sanity/base/theme/forms/clear-button-style';
 }