I'm currently working on updating an old codebase that was written in AngularJS, a framework I am not very familiar with. My task is to implement a spinner that appears when an HTTP request is sent and disappears once the response is received.
The spinner's visibility is controlled by the ng-if directive and the $scope.authenticating variable.
At present, when the page loads, the spinner is visible (as per the initial state of $scope.authenticating === false).
When a user triggers the HTTP request by toggling a switch, the $scope.authenticating is set to true and the spinner appears correctly.
However, after the response is received and processed, even though the $scope.authenticating is set back to false, the spinner remains visible and does not disappear as intended.
Any assistance would be greatly appreciated.
Below is the relevant code snippet:
The controller:
$scope.authenticating = false
$scope.myfunction = async function (check, change, user) {
if (someCheck(user)) {
$scope.modified = true;
...
$scope.authenticating = true
let res = await AppUserResource.patch(..., ...).$promise;
console.log('res: ' + JSON.stringify(res))
$scope.authenticating = false
}
}
The corresponding HTML code snippet:
<div style="margin-top:13px">
<div ng-if="!authenticating">
<label class="switch">
<input id="switch" ng-change="bypassApps(disabledAppsCheckbox, true, user)" ng-model="disabledAppsCheckbox"
type="checkbox">
<div class="slider round">
<div class="slider-text pull-left text-green-table">{{'ON' | translate}}</div>
<div class="slider-text pull-right text-red-table">{{'OFF' | translate}}</div>
</div>
</label>
</div>
<div ng-if="authenticating">
<i class="fa fa-spinner fa-spin"style="font-size:270px;margin-bottom5%; margin-top5%"></i>
</div>
</div>