Laravel Dusk: Wait for a load mask/overlay to finish - laravel-5

Question

I am having difficulty getting some tests to pass because of a load mask I put over the entire screen during AJAX calls (transparent black with a loading gif in the middle).
I can get it to work if I pause(2000) each time, but the amount of AJAX calls in the app make that the slow solution. I am trying to use waitUntilMissing but it's not working.
I have a div with two classes: load-mask and loading.
load-mask is always there
loading class applied to div during all vue.js AJAX calls; this is the load mask
When AJAX response received, loading class removed
So in my test I am trying to do this:
$browser->loginAs($this->user)
->visit(new CustomInputPage)
->saveNarrative('Lorem ipsum dolor')
->visit(new CustomInputPage)
->waitUntilMissing('.load-mask')
->assertSee('Lorem ipsum dolor');
Load a page
Enter text & hit save
reload page
make sure text is still there
I get an error on the assertSee because once the page loads, the loading is applied as it makes it's AJAX call so it hasn't loaded the text yet.
I am assuming waitForMissing('.load-mask') is passing before the load mask even starts, so it tries to assertSee during the loading process, but it's an assumption.
Is there a working solution outside just using pause?
EDIT: I am currently trying to click around the page to reload the AJAX instead of a full page load. I am still experiencing the same issue.
Now I am trying this instead:
$browser->loginAs($this->user)
->visit(new CustomInputPage)
->saveNarrative('Lorem ipsum dolor')
->clickLink('Tab 2')
->waitUntilMissing('.load-mask')
->assertSee('Lorem ipsum dolor');
Clicking a tab will load the AJAX call I'm referring to. I notice in the screenshot it's always showing my .loading animation.
So...Tab 2 should be an empty box but the screenshot shows the text hasn't been cleared yet and load mask is still present (happens after response is received).
So I can't get the timing on a completed AJAX call down without using pause. Should I try another way?
EDIT 2
Here is where my load mask is being inserted. The vue.js axios library.
import store from '../store';
let numberOfAjaxCAllPending = 0;
axios.interceptors.request.use(function (config) {
// Do something before request is sent
numberOfAjaxCAllPending++;
store.commit('isLoading', true);
return config;
}, function (error) {
numberOfAjaxCAllPending = 0;
store.commit('isLoading', false);
// Do something with request error
return Promise.reject(error);
});
// Add a response interceptor
axios.interceptors.response.use(function (response) {
// Do something with response data
numberOfAjaxCAllPending--;
if (numberOfAjaxCAllPending === 0) {
store.commit('isLoading', false);
}
return response;
}, function (error) {
numberOfAjaxCAllPending = 0;
store.commit('isLoading', false);
// Do something with response error
return Promise.reject(error);
});
And on each Laravel blade template, I tried this first:
<div :class="{ loading: $store.state.isLoading }" class="load-mask"></div>
But now I am trying this way, with the loading class always present and just toggling display none/block
<div :style="{display: $store.getters.getLoadingDisplay }" class="loading"></div>
Same issue occurs this way as well. The load mask is present and I am also noticing the text box isn't being cleared when switching tabs in Laravel Dusk (the tabs clear fine in a regular browser).
EDIT 3
The first assertion passes, then it fails when trying to ->press('Save'). I get this error:
Facebook\WebDriver\Exception\UnknownServerException: unknown error: Element <button type="button" class="btn btn-sm mt-3 btn-primary" style="float: left;">...</button> is not clickable at point (440, 912). Other element would receive the click: <div class="loading" style="display: block;"></div>
This is the test I am trying to run. As you can see, I have a waitUntilMissing and an assertMissing right after each other. Then I press Save and it says there's still a load mask. If I wait 2 seconds before the keys statement, it works fine.
$browser->loginAs($this->user)
->visit(new CustomInputPage)
->waitUntilMissing('.loading')
->assertMissing('.loading')
->keys('.ql-editor', 'Test Text')
->press('Save')
->waitUntilMissing('.loading');