Steps to stop mat-spinner upon receiving Job Success/Failure Notification from the backend

I have a task that runs asynchronously and takes a long time to complete. When the task starts, I display a mat-spinner with a timeout set at 60000 milliseconds. However, we now have a notification service that provides updates on the job status. I would like to stop the spinner when a message is received, regardless of whether the job was successful or not.

Code for displaying a spinner with a timeout:-

 this.recommendationService
                    .executeCustomerOpportunityMapper(opportuniyMapperJson)
                    .subscribe(
                        response => {
                            this.isExecuteOppRanking = true;
                            this.snakbar.statusBar(
                                "Executing customer opportunity ranking",
                                "Success"
                            );
                            this.spinner.show();
                            setTimeout(() => {
                                this.spinner.hide();

this.loadRankedOpportunities(tableMetadata);
                                this.selectedIndex = 3;
                                this.isExecuteOppRanking = false;
                            }, 60000);

Message Notification Service:- 

this.messageService.messageReceived$.subscribe(data => {
        this.snakbar.statusBar("Platform job status - " + data, "Info");

    });

I want the spinner to stop when the messageService receives a success/failure notification instead of waiting for the 60000 ms timeout.

javascriptangulartypescriptangular-material

Answer №1

Assuming that both of your subscriptions are located within the same component, an option to stop the spinner would be to relocate the spinner.hide() method to the other subscription function.

this.dataUpdateService.dataUpdated$.subscribe(info => {
    this.notification.show("Data has been updated - " + info, "Notification");
    if (info === "complete") { // additional check for completion status
        this.spinner.stop();
        this.loadData(metadata);
        this.tabIndex = 1;
        this.isProcessingData = false;
    }
});

this.retrievalService
    .fetchNewData(dataJson)
    .subscribe(result => {
        this.isProcessingData = true;
        this.notification.show(
            "Retrieving new data",
            "Successful"
        );
        this.spinner.start();
     });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the technique for performing asynchronous querying of multiple SQL databases?

Currently, I am in the process of developing a web application using nestjs and typeorm. I have been contemplating the functionality of the following code: const r1 = await this.connection.query(sqlA) const r2 = await this.connection query(sqlB) Does th ...

javascriptmysqlnode.jsnestjstypeorm

From Google Assistant to Python Results

Is there a way to control a Bitcraze Crazyflie drone using Google Home? I'm looking to give the command "Drone fly to x3 y4" which will be processed through Firebase and result in the Google Assistant Output: "Flying to x3 y4". Additionally, I need an ...

javascriptpythonnode.jsgoogle-assistant-sdk

What is the best way to ensure that circles only touch each other by their edges?

Trying to align three circles touching each other has been a challenge for me. Although I have successfully managed to make two touch, the third one remains elusive. How can I ensure that all three circles are in contact with each other, especially when th ...

javascripthtmlcss

What is the best way to deliver flash messages using Express 4.0?

Currently, my web application requires authentication, and I am encountering an issue with the signup page. If a user tries to sign up with an email that is already in the database, I want to display an error message. Here is the code snippet I am using on ...

javascriptnode.jsexpresssession

What could be causing my header component to rerender even when there are no new props being received?

https://codesandbox.io/s/crimson-field-83hx6 In my project, I have a Header component that simply displays a fixed text and includes a console.log statement: const Header = props => { console.log("header render"); return ( <header> ...

javascriptreactjs

Is it necessary to define module.exports when using require() to import a file?

While setting up my Express server, I am using Babel to transpile my ES6 files seamlessly. In my vanilla JS server.js file, I include require('babel-core/register') and require('./app'). Within my ES6 file app.js, I handle all the usua ...

javascriptnode.jsexpressrequirebabeljs

What could be the reason for the inconsistent behavior of onClick, causing it to occasionally fail to display the associated

I just started using typescript 2 days ago, mainly to create a custom component for my streamlit app. I've made a navigation bar with a tab that can be clicked on the sidebar, but it's displaying some erratic behavior. Sometimes when I click on t ...

pythonhtmltypescriptonclicktabs

Repairing the Performance of the 'Save' Feature

Can the 'Save' button in my code save team assignments for players selected using drag and drop? I'm considering using localStorage, but unsure about implementation. Note: To run the code properly, copy it as an HTML file on your computer. ...

javascriptjqueryhtmlcss

Using React and graphql to show information on selected options across components

Currently, I'm facing a challenge in determining my next step. In productList.js, there is a straightforward select dropdown class component that displays all data from Products (id, name, brand,vintage) using graphql(apollo). It successfully sho ...

javascriptreactjsgraphqlreact-apollo

Issue: Failed to Render: Error encountered during parsing of template: Element 'mat-checkbox' is not recognized as a valid element

For the purpose of testing my component, I wrote the following code snippet: describe('Component: TestComponent', () => { let component: TestComponent; let fixture: ComponentFixture<TestComponent>; beforeEac ...

angulartypescripttestingangular-material

Using jQuery to target a specific item from a retrieved list of elements

I'm currently working on a photo gallery feature that is reminiscent of Instagram or Facebook user photos. My goal is to enable users to view details about each image (such as the date) in a box that appears over the image when they hover over it. E ...

javascriptphpjqueryhtml

Automatically generate a component and seamlessly integrate it into your git repository

How can I automatically generate a component in Angular CLI (2^) and add it to Git without having to manually add each generated component using an IDE or CMD? ...

angulargit

Using Javascript and CSS to Float DIV Elements

Recently, I've been working on a small algorithm that adds a special class to an element when the mouse reaches the halfway point or beyond on the X-axis of the browser. I also have a screenshot that demonstrates where this application will be utiliz ...

javascripthtmlcss

Step-by-step guide for embedding a Big Commerce website into an iframe

Can a website be opened inside an iframe? If not, is it possible to display a message like 'page not found' or 'this website does not allow data fetching in iframes'? <!DOCTYPE html> <html> <body> <h1>Using the ...

javascripthtmliframesame-origin-policyx-frame-options

Emphasizing Text Within Div Element

Imagine having a div element structured as such: <div id="test" class="sourcecode"> "Some String" </div> Can CSS and JavaScript be utilized to highlight a specific portion of that string based on a search query? For instance, if the search q ...

phpjavascriptcssstringhighlight

Can deferrable views function solely within independent components?

Experimenting with deferrable views, I have implemented the following code within a standard (NgModule-based) component. @defer (on interaction) { <app-defer></app-defer> }@placeholder { <p>click to load</p> } The DeferComp ...

angulardeferred-loading

Is there a way to verify in Angular whether an image link has a width and height exceeding 1000?

I'm currently working on a function that checks if an image linked in an input field has a width and height greater than 1000 pixels, and is in JPG format. Here's my approach: HTML: <input (change)="checkValidImage(1, product.main_photo)" [ ...

angulartypescript

Trouble Displaying DHtmlX Scheduler Events on Safari and Internet Explorer

I have recently embarked on the journey of building a nodejs application and decided to incorporate DHtmlX Scheduler as my calendar. To my dismay, I encountered an issue where the events are not displaying on Safari or IE, despite working perfectly fine on ...

javascriptnode.jsexpresscross-browserdhtmlx

Next.js App encounters a missing API route (The requested page is not found)

I have been working on a Next.js app and I created an api route for sending emails. Everything is functioning properly in my development environment. However, after deploying to production, I encountered a 404 error with the message "The page could not b ...

javascriptreactjsapinext.jsserver-side-rendering

After performing a Vuex action on one Vue.js component, the update is not reflected on another Vue

I am facing an issue with a component that renders a booking table. When I update my store in another component, the table does not get updated even though the store and computed properties are updated. I suspect that the problem lies with the filter not b ...

javascriptvue.jsvuex