Stuck loader

package.json

@@ -11,7 +11,7 @@
         "@open-policy-agent/opa-wasm": "^1.2.0",
         "@sentry/react": "^6.0.1",
         "@sentry/tracing": "^6.0.1",
-        "axios": "^0.21.2",
+        "axios": "^0.24.0",
         "babel-polyfill": "^6.26.0",
         "date-fns": "^2.16.1",
         "events": "^3.2.0",

src/api/axios.ts

@@ -13,7 +13,7 @@
  *
  */
 
-import axios from "axios";
+import axios, { AxiosRequestConfig } from "axios";
 import { User } from "oidc-client";
 
 import { ENV } from "../env";
@@ -23,43 +23,44 @@ import { setFlash } from "../utils/Flash";
 let calls = 0;
 const apiPath = ENV.BACKEND_URL + "/api/";
 
+function decrementCalls() {
+    calls--;
+    if (calls <= 0) {
+        mySpinner.stop();
+    }
+}
+
 // basic configuration for axios.
 // the 'Authorization' header is set in
 // index.ts:setUser
-const axiosConfig = {
+const axiosConfig: AxiosRequestConfig = {
     baseURL: apiPath,
     headers: {
         Accept: "application/json",
         "Content-Type": "application/json",
-        post: {
-            "Content-Type": "application/json",
-        },
-        put: {
-            "Content-Type": "application/json",
-        },
     },
 };
-
 const axiosInstance = axios.create(axiosConfig);
-axiosInstance.interceptors.request.use((config) => {
-    calls++;
-    mySpinner.start();
-    return config;
-});
+axiosInstance.interceptors.request.use(
+    (config) => {
+        calls++;
+        mySpinner.start();
+        return config;
+    },
+    (error) => {
+        decrementCalls();
+        return Promise.reject(error);
+    }
+);
 
 axiosInstance.interceptors.response.use(
     (response) => {
-        calls--;
-        if (calls <= 0) {
-            mySpinner.stop();
-        }
+        decrementCalls();
         return response;
     },
     (error) => {
-        calls--;
-        if (calls <= 0) {
-            mySpinner.stop();
-        }
+        decrementCalls();
+
         if (error.response) {
             if (error.response.status >= 500 && error.response.data?.body) {
                 setFlash(error.response.data.body, "error");
@@ -68,8 +69,10 @@ axiosInstance.interceptors.response.use(
         return Promise.reject(error);
     }
 );
+
 export default axiosInstance;
 
 export function setUser(_user: User | null) {
-    axiosInstance.defaults.headers["Authorization"] = `${_user?.token_type} ${_user?.access_token}`;
+    // @ts-ignore
+    axiosInstance.defaults.headers.common["Authorization"] = `${_user?.token_type} ${_user?.access_token}`;
 }

src/api/filterable.ts

@@ -24,9 +24,8 @@ import axiosInstance from "./axios";
 
 export const cancel = axios.CancelToken.source();
 
-function getHeaders(eTag?: string | null) {
-    const ifNoneMatchHeader = eTag ? { "If-None-Match": eTag } : {};
-    return { ...ifNoneMatchHeader };
+function getHeaders(eTag?: string | null): Record<string, string> {
+    return eTag ? { "If-None-Match": eTag } : {};
 }
 
 interface Params {
@@ -59,6 +58,7 @@ export function filterableEndpoint<T>(
         ) as string;
     }
     const extractResponseHeaders = (headers: any) => {
+        const result: [number, string | null] = [99, null];
         let etag: string | undefined = headers["etag"];
 
         if (etag?.startsWith('W/"')) {
@@ -67,7 +67,9 @@ export function filterableEndpoint<T>(
 
         const contentRange: string | undefined = headers["content-range"];
         const total = contentRange ? parseInt(contentRange.split("/")[1], 10) : 99;
-        return [total, etag];
+        result[0] = total;
+        result[1] = etag || null;
+        return result;
     };
     return axiosInstance
         .get(path, {

yarn.lock

@@ -4879,12 +4879,12 @@ axios-mock-adapter@^1.19.0:
     fast-deep-equal "^3.1.3"
     is-buffer "^2.0.3"
 
-axios@^0.21.2:
-  version "0.21.2"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.2.tgz#21297d5084b2aeeb422f5d38e7be4fbb82239017"
-  integrity sha512-87otirqUw3e8CzHTMO+/9kh/FSgXt/eVDvipijwDtEuwbkySWZ9SBm6VEubmJ/kLKEoLQV/POhxXFb66bfekfg==
+axios@^0.24.0:
+  version "0.24.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.24.0.tgz#804e6fa1e4b9c5288501dd9dff56a7a0940d20d6"
+  integrity sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==
   dependencies:
-    follow-redirects "^1.14.0"
+    follow-redirects "^1.14.4"
 
 axobject-query@^2.2.0:
   version "2.2.0"
@@ -8764,7 +8764,7 @@ focus-lock@^0.8.1:
   dependencies:
     tslib "^1.9.3"
 
-follow-redirects@^1.0.0, follow-redirects@^1.14.0:
+follow-redirects@^1.0.0, follow-redirects@^1.14.4:
   version "1.14.6"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.6.tgz#8cfb281bbc035b3c067d6cd975b0f6ade6e855cd"
   integrity sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A==