Why my lightning spinner doesn't work right?

Question

I have a apex class that call an API, the data of the API like endpoint is on a custom setting, and I did a lightning component to call this API with the apex class. It works fine, only for one scenario that the QA found. When he click on the consult button and shows the data, he go to the custom setting, change the endpoint (we suffer with stability with this APIs, so it makes sense), and press the button again, and shows the spinner and a error message, finally, he go back, put the right endpoint on the custom setting and try to consult again, but then the problem shows up, the spinner just keep loading.. and nothing, I wait more than 2 minutes and nothing, and I really dont understand why have this behavior..

The function bellow, my button only call the function Ticket:

Ticket: function(cmp, event, helper){
        cmp.set('v.IsSpinner', 'true'); 
        setTimeout(() => {
            this.fetchTicket(cmp, event, helper);
        }, 0);
        },
            fetchTicket: function(cmp, event, helper){ 
                var action = cmp.get("c.Tickets"); 
                action.setParams({
                    selectedMid: cmp.get('v.midSelected')
                });
                
                action.setCallback(this, function(response) {
                    var state = response.getState();
                    if (state === "SUCCESS") { 
                        var TicketReturn = response.getReturnValue();
                        
                        if(TicketReturn.startsWith("Erro")){
                            let message = "";
                            message = TicketReturn.substring(6);
                            cmp.set('v.DatatableOpen', 'false');
                            cmp.set('v.message', message);
                            cmp.set('v.messageOpen', 'true');
                        }
                        else {
                        cmp.set('v.messageOpen', 'false');
                        var Ticket = JSON.parse(TicketReturn);
                        }
                        cmp.set("v.data", listaTicket); 
                        cmp.set('v.DatatableOpen', 'true');
                        }
                    cmp.set('v.IsSpinner', 'false');  
                }); 
                $A.enqueueAction(action);
            },

Answer 1

To be honest, I'm mildly surprised the code works at all (or in any sense, properly).

I've annotated this code with the numerous potential problems.

Ticket: function (cmp, event, helper) {
    // WARNING: 'true' and 'false' are both "true" in JavaScript
    // See https://developer.mozilla.org/en-US/docs/Glossary/Truthy
    cmp.set("v.IsSpinner", true);
    // You should always wrap async calls with $A.getCallback, unless provided by the framework (e.g. setCallback)
    setTimeout(() => {
        $A.getCallback(() => this.fetchTicket(cmp, event, helper))
    }, 0);
},
fetchTicket: function (cmp, event, helper) {
    var action = cmp.get("c.Tickets");
    action.setParams({
        selectedMid: cmp.get("v.midSelected"),
    });

    action.setCallback(this, function (response) {
        var state = response.getState();
        // We can set this now; it won't take effect until this callback returns
        cmp.set("v.IsSpinner", false);
        if (state === "SUCCESS") {
            // This is unusual; normally, we want to return some kind of Object
            var TicketReturn = response.getReturnValue();
            if (TicketReturn.startsWith("Erro")) {
                let message = "";
                message = TicketReturn.substring(6);
                cmp.set("v.DatatableOpen", false);
                cmp.set("v.message", message);
                cmp.set("v.messageOpen", true);
            } else {
                cmp.set("v.messageOpen", false);
                // Unused code. Possible mistake?
                // var Ticket = JSON.parse(TicketReturn);
            }
            // This next line should throw an error, the variable doesn't exist
            // cmp.set("v.data", listaTicket);
            cmp.set("v.DatatableOpen", true);
        }
        // we're not handling the ERROR state, this may be a problem
        // ERROR happens if an exception is thrown or governor limits are violated
        // Consider adding an ERROR handler as well
    });
    $A.enqueueAction(action);
},

In addition, if your method in Apex is written as @AuraEnabled(cacheable=true), note that this might be causing problems with your code; a refresh would be expected to fix the problem. You may want to try using @AuraEnabled(cacheable=false), and see if that fixes problems.