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.

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

Enhancing Connectivity Through Fastify and Fastify-HTTP-Proxy Integration

I'm currently utilizing fastify along with fastify-http-proxy on a VPS running Ubuntu 19.x that is equipped with three unique IPv4 addresses. I have confirmed the functionality of these IP addresses by testing them using the following example IPs: cur ...

embedding fashion within offspring component in vue

Looking to apply inline styles to a child component? I am trying to pass properties like height: 200px and overflow-y: scroll. I attempted passing it this way: <Childcomponent style="height: 200px; overflow-y: scroll;" /> but had no luck. ...

Translate a portion of a painting by utilizing context.putImageData()

I am attempting to gradually fill a canvas with pieces of the original image. To achieve this, I need each square of the image to be filled in iteratively on the canvas. To optimize performance, my approach involves rendering the original image onto an of ...

Retrieving the content of input elements within a div post removal

I have a situation where I need to dynamically add input text fields inside a div and then delete the div while retaining the values of the input field in a variable. Here's an example code snippet that demonstrates this: $(document).ready(funct ...

Hide a div when multiple classes are filtered using jQuery

I have several divs with the class .item. When the user clicks on the Classfilter submit button, all .item elements that also have at least one class from the dateClasses array (for example ['28.09.2015', '29.09.2015']) should be hidden ...

Creating a ripple effect on a circle with CSS and HTML when it is clicked

Can anyone assist me in creating a wave effect around the circle when it is clicked? To better visualize what I am trying to achieve, you can view this GIF image. Appreciate your help in advance! ...

Tips for accessing various JSON objects from a JSON document

My task involves extracting specific information from a JSON file using AJAX and jQuery. The structure of my JSON data is as follows: "Footwear": { "Adidas": [ { "id" : 0, &q ...

Exporting third party definitions from a TypeScript npm module for reuse in other projects

Our custom npm logging module, which is built using TypeScript and relies on the pino library, encounters errors when being imported into an application: Error: node_modules/@scope/logging/lib/index.d.ts(1,23): error TS2688: 'pino' type definiti ...

I am attempting to adjust the color of the active tab, but I seem to be encountering issues in my code. Can anyone help me

The currently active tab should change along with the text inside the box, but it's not working as expected. I'm struggling to find out why. Here is a fiddle to demonstrate my progress so far: var btn1 = document.getElementById("btn1"); va ...

What is the proper way to inject a defined namespace using Angular's Dependency Injection?

I'm attempting to include the npm url node_module into my Angular service. Instead of just importing it like this: import * as url from 'url'; and using it in my class like so: url.format(); //using it I'd prefer to inject it, as I ...

The expected functionality of setTimeout is not being achieved

I have implemented an ajax scroll down feature in my application to load user posts. However, I am facing an issue where the for loop iteration is causing excessive loading time, leading to browser freezing until the results are displayed. To address this ...

Updating the state of an object nested within another object in React JS

So, I have a nested object within another object and I need to update the state of one or more properties in the inner object. This is my current state: const [products, setProducts] = useState({ name: '', type: '', price: '& ...

There are currently no examples demonstrating how to populate row headers and dynamic columns in the Material table

Currently, I am facing a situation where I need to have rows as headers and dynamic values in columns for a material table. Below is an example: Department Deparment1 Name Jack Vimal Location Chenn ...

Integrating Watson Conversation with Oracle Database

Hello everyone, I am currently working on a project where I need Watson to fetch a response manually set from our Oracle Databases. To achieve this, I am using async to access the database sequentially and return the response. Initially, I faced an issue ...

What is the best way to run tests on customized Material-UI components with withStyles using react-testing-library?

Creating a test with a styled Material-UI component using react-testing-library in typescript has proven to be challenging, particularly when trying to access the internal functions of the component for mocking and assertions. Form.tsx export const style ...

Leveraging Angular to dynamically adjust the height of ng-if child elements based on parent

I'm struggling with a few things in my current setup. I have a view that consists of 3 states - intro, loading, and completed. My goal is to create a sliding animation from left to right as the user moves through these states. Here is the basic struc ...

Mastering data extraction from JSON using React JS (with Axios)

Being new to ReactJS and axios, I am facing a challenge. I need to iterate through JSON data and extract values where the key is a number (e.g. 0, 1, 2...). However, I am unsure how to implement this in my code since the server provides dynamic JSON data ...

Inserting POST request data into subdocument arrays of a database

I am struggling to add data to a nested mongoose sub-document when creating a new schema from the client side. Only the data that is not nested inside another schema/array is being sent over to the database. My database setup includes MongoDB with Mongoos ...

What could be causing my prompt for a username to not work properly as I attempt to develop a system that generates a unique code using the user's initials?

I'm currently working on a script that will be used by the secretaries in our school district to generate unique codes for new students or hires. The code will consist of an 8-digit output, a randomly generated 6-digit number, and the user's init ...

Position a div relative to another div with a static position

I am attempting to create a site that is fullscreen and responsive, but I am having issues with elements in the container overflowing on smaller screens, causing it to not be 100% as desired. I have tried using: top:100%; position:relative; width:100%; he ...