Show loader while async function fetches data

[talkoren]

Hello,

My experiment includes a trial which uses the jsPsychCallFunction plugin with async: true to fetch data from a server (it does so successfully). Is there a way to present a loader gif while the function waits for a response?

Thank you!

[Shaobin-Jiang]

The example uses a timeout and a line of text instead of a request to the server and the loader gif, but things should work the same way.

let jsPsych = initJsPsych();

let timeline = [];

let trial = {
    type: jsPsychCallFunction,
    func: function (done) {
        setTimeout(function () {
            jsPsych.getDisplayElement().innerHTML = '';
            done();
        }, 5000);
    },
    async: true,
    on_start: function () {
        jsPsych.getDisplayElement().innerHTML = 'Please wait for 5 seconds...';
    },
};

jsPsych.run([trial]);

[talkoren]

Works perfectly, thank you @Shaobin-Jiang!