merge-vs-startwith.js

// https://medium.freecodecamp.org/how-to-build-a-github-search-in-react-with-rxjs-6-and-recompose-e9c6cc727e7f
// Last example ends with this:

merge(
  of(<h3>Loading...</h3>)
  ajax(url).pipe(
    pluck('response'),
    map(Component),
    catchError(error => of(<Error {...error} />))
  )
)
    
// But we can reduce some nesting and create fewer observables by changing the merge to a startWith:

ajax(url).pipe(
  pluck('response'),
  map(Component),
  catchError(error => of(<Error {...error} />)),
  startWith(<h3>Loading...</h3>)
)
             
// And we can write in a synchronous style with my library:
             
import { async } from '@thejohnfreeman/await-observable'
             
const search = async(function* (url) {
  try {
    const response = (await ajax(url)).response
    return <Component {...response} />
  } catch (error) {
    return <Error {...error} />
  }
})

search(url).pipe(startWith(<h3>Loading...</h3>))