feat(ShareRecipientsInput): Simplify loading state

packages/cozy-sharing/src/components/ShareAutosuggest.jsx

@@ -23,14 +23,14 @@ const ShareAutocomplete = ({
   loading,
   contactsAndGroups,
   recipients,
-  onFocus,
   onPick,
   onRemove,
   placeholder
 }) => {
   const [inputValue, setInputValue] = useState('')
   const [suggestions, setSuggestions] = useState([])
   const [isPasted, setIsPasted] = useState(false)
+  const [isLoadingDisplayed, setLoadingDisplayed] = useState(false)
 
   const autosuggestRef = useRef(null)
 
@@ -117,7 +117,8 @@ const ShareAutocomplete = ({
   }
 
   const onAutosuggestFocus = () => {
-    onFocus()
+    // We only show the loading state when the user has focus on the input
+    setLoadingDisplayed(true)
   }
 
   const onAutosuggestBlur = () => {
@@ -163,12 +164,12 @@ const ShareAutocomplete = ({
         )
       })}
       <input {...inputProps} onKeyPress={onKeyPress} onKeyUp={onKeyUp} />
-      {loading && (
+      {loading && isLoadingDisplayed ? (
         <Spinner
           color={palette.dodgerBlue}
           className="u-flex u-flex-items-center"
         />
-      )}
+      ) : null}
     </div>
   )
 
@@ -204,7 +205,6 @@ ShareAutocomplete.propTypes = {
   loading: PropTypes.bool,
   contactsAndGroups: PropTypes.array,
   recipients: PropTypes.array.isRequired,
-  onFocus: PropTypes.func.isRequired,
   onPick: PropTypes.func.isRequired,
   onRemove: PropTypes.func.isRequired,
   placeholder: PropTypes.string

packages/cozy-sharing/src/components/ShareAutosuggest.spec.jsx

@@ -1,29 +1,36 @@
-import { render, fireEvent } from '@testing-library/react'
+import { render, fireEvent, screen } from '@testing-library/react'
 import React from 'react'
 
 import ShareAutosuggest from './ShareAutosuggest'
 import AppLike from '../../test/AppLike'
 
+jest.mock('cozy-ui/transpiled/react/Spinner', () => ({
+  Spinner: () => <div>loading</div>
+}))
+
 describe('ShareAutosuggest', () => {
-  it('tests if ShareAutosuggest calls onFocus and onPick', () => {
-    const onPick = jest.fn()
-    const onFocus = jest.fn()
-    const onRemove = jest.fn()
-    const { getByPlaceholderText } = render(
+  const setup = ({ onPick, onRemove, loading = false }) => {
+    render(
       <AppLike>
         <ShareAutosuggest
+          loading={loading}
           contactsAndGroups={[]}
           placeholder="myPlaceHolder"
           onPick={onPick}
-          onFocus={onFocus}
           recipients={[]}
           onRemove={onRemove}
         />
       </AppLike>
     )
-    const inputNode = getByPlaceholderText('myPlaceHolder')
-    inputNode.focus()
-    expect(onFocus).toHaveBeenCalled()
+  }
+
+  it('tests if ShareAutosuggest calls onPick', () => {
+    const onPick = jest.fn()
+    const onRemove = jest.fn()
+
+    setup({ onPick, onRemove })
+
+    const inputNode = screen.getByPlaceholderText('myPlaceHolder')
     // It should not call onPick if the value is not an email
     fireEvent.change(inputNode, { target: { value: 'quentin@qq' } })
     fireEvent.keyPress(inputNode, { key: 'Enter', keyCode: 13, charCode: 13 })
@@ -43,4 +50,18 @@ describe('ShareAutosuggest', () => {
       email: 'quentin.valmori@cozycloud.cc'
     })
   })
+
+  it('should show loading only after user focus input', () => {
+    const onPick = jest.fn()
+    const onRemove = jest.fn()
+
+    setup({ onPick, onRemove, loading: true })
+
+    const inputNode = screen.getByPlaceholderText('myPlaceHolder')
+
+    expect(screen.queryByText('loading')).toBeNull()
+    fireEvent.focus(inputNode)
+
+    expect(screen.getByText('loading')).toBeInTheDocument()
+  })
 })

packages/cozy-sharing/src/components/ShareRecipientsInput.jsx

@@ -1,8 +1,8 @@
 import get from 'lodash/get'
 import PropTypes from 'prop-types'
-import React, { useState, useEffect, useMemo } from 'react'
+import React, { useMemo } from 'react'
 
-import { useQueryAll } from 'cozy-client'
+import { useQueryAll, isQueryLoading } from 'cozy-client'
 
 import ShareAutosuggest from './ShareAutosuggest'
 import { buildContactsQuery, buildContactGroupsQuery } from '../queries/queries'
@@ -13,8 +13,6 @@ const ShareRecipientsInput = ({
   onPick,
   onRemove
 }) => {
-  const [loading, setLoading] = useState(false)
-
   const contactsQuery = buildContactsQuery()
   const contactsResult = useQueryAll(
     contactsQuery.definition,
@@ -27,28 +25,11 @@ const ShareRecipientsInput = ({
     contactGroupsQuery.options
   )
 
-  useEffect(() => {
-    if (
-      loading &&
-      !contactsResult.hasMore &&
-      contactsResult.fetchStatus === 'loaded' &&
-      !contactGroupsResult.hasMore &&
-      contactGroupsResult.fetchStatus === 'loaded'
-    ) {
-      setLoading(false)
-    }
-  }, [contactsResult, contactGroupsResult, loading])
-
-  const onShareAutosuggestFocus = () => {
-    if (
-      contactsResult.hasMore ||
-      contactsResult.fetchStatus === 'loading' ||
-      contactGroupsResult.hasMore ||
-      contactGroupsResult.fetchStatus === 'loading'
-    ) {
-      setLoading(true)
-    }
-  }
+  const isLoading =
+    isQueryLoading(contactsResult) ||
+    contactsResult.hasMore ||
+    isQueryLoading(contactGroupsResult) ||
+    contactGroupsResult.hasMore
 
   const contactsAndGroups = useMemo(() => {
     // we need contacts to be loaded to be able to  add all group members to recipients
@@ -87,10 +68,9 @@ const ShareRecipientsInput = ({
 
   return (
     <ShareAutosuggest
-      loading={loading}
+      loading={isLoading}
       contactsAndGroups={contactsAndGroups}
       recipients={recipients}
-      onFocus={onShareAutosuggestFocus}
       onPick={onPick}
       onRemove={onRemove}
       placeholder={placeholder}