Disable Buttons While Data is Loading with RxJS and Vue.js

Share this video with your friends

Streams give you the power to handle a "pending" state where you've made a request for data, but the data hasn't yet returned. You can leverage this pending stream to update your template as well which is often displayed as a "loader" or disabling some part of the UI.

Paul Perry

~ 6 years ago

For rxjs 6 users, imports only need the startWith adding to the imports from rxjs/operators, but updated for clarity:

import { from, merge, of } from 'rxjs'
import { pluck, switchMap, map, mapTo, catchError, share, startWith } from 'rxjs/operators'

Then, just for good measure, here're the updated disabled and buttonText streams, using pipe:

    const disabled$ = merge(
      this.click$.pipe(mapTo(true)),
      getName$.pipe(mapTo(false))
    ).pipe(
      startWith(false)
    )
    
    const buttonText$ = disabled$.pipe(
      map(bool => bool ? "Loading..." : "Load" )
    )

I hope nobody minds I'm adding these below each video, and that they help someone!