loading state for search

client/src/routes/Home.tsx

@@ -54,7 +54,7 @@ class Home extends Component<HomeProps, HomeState> {
 
     private searchAssets = (event: FormEvent<HTMLFormElement>) => {
         event.preventDefault()
-        this.props.history.push(`/search?q=${this.state.search}`)
+        this.props.history.push(`/search?text=${this.state.search}`)
     }
 }
 

client/src/routes/Search.tsx

@@ -1,5 +1,6 @@
-import queryString from 'query-string'
 import React, { Component } from 'react'
+import queryString from 'query-string'
+import Spinner from '../components/atoms/Spinner'
 import Route from '../components/templates/Route'
 import { User } from '../context/User'
 import Asset from '../components/molecules/Asset'
@@ -7,6 +8,7 @@ import styles from './Search.module.scss'
 
 interface SearchState {
     results: any[]
+    isLoading: boolean
 }
 
 interface SearchProps {
@@ -15,16 +17,18 @@ interface SearchProps {
 }
 
 export default class Search extends Component<SearchProps, SearchState> {
-    public state = { results: [] }
+    public state = { results: [], isLoading: true }
 
     public async componentDidMount() {
         const searchParams = queryString.parse(this.props.location.search)
-        const assets = await this.context.ocean.assets.search(searchParams.q)
-        this.setState({ results: assets })
+        const assets = await this.context.ocean.assets.search(searchParams.text)
+        this.setState({ results: assets, isLoading: false })
     }
 
     public renderResults = () =>
-        this.state.results.length ? (
+        this.state.isLoading ? (
+            <Spinner message="Searching..." />
+        ) : this.state.results.length ? (
             <div className={styles.results}>
                 {this.state.results.map((asset: any) => (
                     <Asset key={asset.id} asset={asset} />