Learn TypeScript 3 by Building Web Applications

Adding loading indicators

One more improvement that you could make is to add loading indicators as we did with the Vue version.

Doing so is rather easy with React and react-bootstrap. One way to do so is to add two state variables to hold the loading state for artists and songs.

Here's an example with artists:

const [artistsLoading, setArtistsLoading] = useState(false); 

With this defined, you could set the state to true within the search function just before sending the GraphQL query and back to false once Promise has settled.

Here's an example taken from the final code of LyricsFinder V2:

setArtistsLoading(true); apolloClient.query<FindArtists, FindArtistsVariables>({ ... }).then((result: ApolloQueryResult<FindArtists>) => { ... }).finally(() ...