11. 11
    Disable Buttons While Data is Loading with RxJS and Vue.js
    3m 13s

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

InstructorJohn Lindquist

Share this video with your friends

Send Tweet

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!