How to disable or cancel Refresher and infiniteScroll when there is no connection


Hi , I have a component where it list set of items, it also includes a refresher and infinite scroll… I am also watching for connection availability, I am presenting a toast when ever there is a connection or not… but I do not know how to handle the refresher and infinite scroll when there is not connection available, when the user pulls down for refresh , the apps gets stuck there becuz there is no connection in order for it to complete


    constructor(...........................) {   ///// I am watching connection availability in constructor
        platform.ready().then((readySource => {

        let disconnect = this.watchforDisconnect();

        let connected = this.watchforConnection();

          (res) => {
     = res;        ////// assigning the list items
              this.local.localData(res)    ////// storing in Storage to be cached 
              loading.dismiss();         ///// dismissing loading (since there is loading when the user enters the page)
          (err) => {
              let toast = this.loadingOffline();  ///// handling error by showing a toast 

              toast.onWillDismiss(() => {
               this.local.getLocalData().then((res) => {   ///// when toast is dismissed , loading from cached data
       = res;

            let loading = this.presentLoadingCustom();  ///// custom loader when the user enters the page

         setTimeout(() => {
             this.jobsData.load().subscribe(res => {
             this.updatedJobs = res;    ///// assigning the updated list

           if ([0].id === this.updatedJobs[0].id){   ///// checking whether the list actually updated
             this.presentToastfailure()   ///// present a toast if failed to update
            } else {
             this.presentToastsuccess()  ///// present a toast if success 
    = res;