Asynchronous function works synchronously

Question

I am trying to open a pop up on a mouse click event, but the pop up appears only after receiving response from GetClosetsSites() function, which takes a few seconds.

how can I change the following code to make the pop up to open immediately?

function:

async openInfo(e: any, x: any, y: any) {
    try {
        const closestArchPromise = this.siteservice.GetClosetsSites(e.wgS84_Info.geography);
        const siteIdPromise = this.siteservice.GetSiteId(e.resourceID).toPromise();
        const [closestArch, siteId] = await Promise.all([closestArchPromise, siteIdPromise]);
        this.dialog.closeAll();
        this.dialog.open(InformationComponent, {
            data: { arch: siteId, closestArch: closestArch, lang: this.browserLang },
            panelClass: 'custom-dialog-container'
        });
    } catch (error) {
        console.log(error);
    }
}

backend request:

async GetClosetsSites(wgS84_Info: geography) {
    try {
        const response = await this.http.get<Site[]>(this.baseUrl + 'Site/GetclosestSites?KnownText=' + wgS84_Info.KnownText + '&SystemId=' + wgS84_Info.SystemId).toPromise();
        return response;
    } catch (err) {
        console.log(err);
    }
}

score 1 · Accepted Answer · answered Mar 15 '23 at 22:32

1

The problem here is that you're using Promise.all to wait for the GetClosetsSites promise to complete before opening the dialog. This will be a little bit of a challenge to replace as in your dialog open call you then use the closestArch you get from the function. This means that your this.dialog.open relies on the backend request.

One way to fix this would be to have a default closestArch and update it when you get the data back from the server.

A minimal example of this could look like so:

async openInfo(e: any, x: any, y: any) {
    try {
        const siteId = await this.siteservice.GetSiteId(e.resourceID).toPromise();
        this.dialog.closeAll();

        const dialogRef = this.dialog.open(InformationComponent, {
            data: { arch: siteId, closestArch: [], lang: this.browserLang },
            panelClass: 'custom-dialog-container'
        });
        const closestArch = await this.siteservice.GetClosetsSites(e.wgS84_Info.geography);
        dialogRef.componentInstance.data.closestArch = closestArch;  
    } catch (error) {
        console.log(error);
    }
}

Your dialog would still need to act reasonably in the case that it gets the default data as that will be what is shown while the real data is still being fetched from the server.

answered Mar 15 '23 at 22:32

Minion3665

879
11
25

(This is an example of optimistic UI, here's an article I found which has more detail on optimistic UI design: https://simonhearne.com/2021/optimistic-ui-patterns/) – Minion3665 Mar 15 '23 at 23:19
Thank you, this code works! how can I update the pop up data once GetClosetsSites() answer is available? – otacksverflow Mar 16 '23 at 08:46
@otacksverflow I'd need to know more about your dialog to know for sure: the comments in the other question include someone who had a dialog that didn't auto-update when the data did - "I had to update the data in a FormGroup in the MatDialog however, which I couldn't get to happen automatically when data updated (Reactive Forms don't support two-way binding). So I ended up calling `this.dialogRef.componentInstance.updateMyFormGroup(newFormData)` instead of only updating the data object", you may need to do something like this – Minion3665 Mar 16 '23 at 09:28
that answer also has [an example on stackblitz that might be helpful to you](https://stackblitz.com/edit/angular-dialog-update?file=src%2Fapp%2Fapp.component.ts) – Minion3665 Mar 16 '23 at 09:29
I understand, the problem is that I cant change the value of 'closestArch' at all, regardless of server response, even if I try 'dialogRef.componentInstance.data.closestArch = "123"' nothing is changing. – otacksverflow Mar 16 '23 at 11:14
@otacksverflow I think that's a very similar problem to the one which the commenter on the answer of how to update the form experiences. You'll need to find a way to rerender your component from the componentInstance. Unfortunately I can't help you with that because I don't have your component – Minion3665 Mar 16 '23 at 13:50

Asynchronous function works synchronously

1 Answers1