Show loading image until response

Question

I'm sending via AlamoFire an audio file to a REST API and get a JSON response. Meanwhile I would like to display a loading image (e.g. animated circle) until I receive the response. My current solution is so far:

let voiceData = try? Data(contentsOf: audioRecorder.url)
let uploadUrl = "<server ip>"
    
AF.upload(multipartFormData: { multipartFormData in
   multipartFormData.append(voiceData!, withName: "file", fileName: "recording.m4a", mimeType: "audio/mpeg")
},
to: uploadUrl, method: .post)
.responseJSON { resp in
    print(resp)
}

Now how can I show the loading image in my SwiftUI View?

Does this answer your question https://stackoverflow.com/a/58959008/12299030? — Asperi, Feb 24 '21 at 16:16
This might help you: [SwiftUI Network Image show different views on loading and error](https://stackoverflow.com/a/64416344/8697793) and [How can I load an UIImage into a SwiftUI Image asynchronously?](https://stackoverflow.com/a/65778418/8697793) — pawello2222, Feb 24 '21 at 20:52

score 0 · Answer 1 · answered Feb 24 '21 at 16:26

I'm not sure about AlamoFire, but in order to do 2 things in parallel, you must use async methods, so this is what you could do (in JavaScript):

document.querySelector("#getInfoBtn").addEventListener('click',() => {
    toggleInfoBtnSpinner()
    setTimeout(AFUpload, 10)
});

let toggleInfoBtnSpinner = () => {
    const btn = document.querySelector("#getInfoBtn")
    const spinner = btn.querySelector("#infoSpinner")

    if (spinner == null) {
        btn.innerHTML = `<span id="infoSpinner" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Search`
    } else {
        spinner.remove()
        btn.innerHTML = `Search`
    }
    btn.disabled = !btn.disabled
}

This will set the spinner start and then, you'll execute your AFUpload function after 10 ms as an async function and you can trigger something rom that function to let the system know it finished

Show loading image until response

1 Answers1