feat: disable react-select until all tags have loaded in full

sanity-io · Sep 21, 2021 · 5948a94 · 5948a94
1 parent f712c4c
commit 5948a94
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/src/components/FormFieldInputTags/index.tsx b/src/components/FormFieldInputTags/index.tsx
@@ -40,6 +40,7 @@ const FormFieldInputTags: FC<Props> = (props: Props) => {
 
   // Redux
   const creating = useTypedSelector(state => state.tags.creating)
+  const tagsFetching = useTypedSelector(state => state.tags.fetching)
 
   return (
     <Box
@@ -73,7 +74,7 @@ const FormFieldInputTags: FC<Props> = (props: Props) => {
               defaultOptions
               instanceId="tags"
               isClearable={false} // TODO: re-enable when we're able to correctly (manually) re-validate on clear
-              isDisabled={creating || disabled}
+              isDisabled={creating || disabled || tagsFetching}
               isLoading={creating}
               isMulti
               name={name}
@@ -82,7 +83,7 @@ const FormFieldInputTags: FC<Props> = (props: Props) => {
               onChange={onChange}
               onCreateOption={onCreateTag}
               options={options}
-              placeholder={placeholder}
+              placeholder={tagsFetching ? 'Loading...' : placeholder}
               styles={reactSelectStyles}
               value={controllerValue}
             />

diff --git a/src/components/SearchFacetTags/index.tsx b/src/components/SearchFacetTags/index.tsx
@@ -23,6 +23,7 @@ const SearchFacetTags: FC<Props> = (props: Props) => {
   // Redux
   const dispatch = useDispatch()
   const tags = useTypedSelector(state => selectTags(state))
+  const tagsFetching = useTypedSelector(state => state.tags.fetching)
   const allTagOptions = getTagSelectOptions(tags)
 
   const handleChange = (option: ReactSelectOption) => {
@@ -89,12 +90,13 @@ const SearchFacetTags: FC<Props> = (props: Props) => {
             components={reactSelectComponents}
             instanceId="facet-searchable"
             isClearable
+            isDisabled={tagsFetching}
             isSearchable
             name="tags"
             noOptionsMessage={() => 'No tags'}
             onChange={value => handleChange(value as ReactSelectOption)}
             options={allTagOptions}
-            placeholder="Select..."
+            placeholder={tagsFetching ? 'Loading...' : 'Select...'}
             styles={reactSelectStyles}
             value={facet?.value}
           />