When waiting for a response from an AXIOS server, replace an element with a loading animation in Vue.js?

Question

Vue.js

I have an element ( button ), when clicked on which, through the @click attribute, it calls the "sendRequest" method, which in turn sends a request to the server through the axios library, and so, as with any call to the server through the axios library, while the response from the server is still being processed, to insert instead of an element (in this case, a button) - a loading animation (GIF picture with a loader)?

Answer 1

I know two ways:

1. Simple:
   
   1. Create a loading variable.
      
   2. Set the value before sending the request loading = true.
      
   3. After sending, in the finally section, set the value loading = false.
      
   4. In the template itself, look at these switches and display the loading
      
   
   
2. Complex but more reliable
   
   1. Use xstate to manage the states of your component.
      
   2. In the template itself, look at the current state and display the loading
      
   
   

UPD
I highly recommend this report on the topic