Update guard and interceptors to prevent conflicts (#1716)

<!--
Ensure the title clearly reflects what was changed.
Provide a clear and concise description of the changes made. The PR
should only contain the changes related to the issue, and no other
unrelated changes.
-->

Fixes OPS-3144

Author: alexandrudanpop

packages/react-ui/src/app/common/guards/intial-data-guard.tsx

@@ -1,8 +1,11 @@
 import { LoadingSpinner } from '@openops/components/ui';
-import { Suspense, useEffect } from 'react';
+import { Suspense, useEffect, useState } from 'react';
 
 import { flagsHooks } from '@/app/common/hooks/flags-hooks';
-import { setupResponseInterceptor } from '@/app/interceptors';
+import {
+  setupRequestInterceptor,
+  setupResponseInterceptor,
+} from '@/app/interceptors';
 
 type InitialDataGuardProps = {
   children: React.ReactNode;
@@ -11,16 +14,31 @@ export const InitialDataGuard = ({
   children,
 }: Readonly<InitialDataGuardProps>) => {
   const { data: flags } = flagsHooks.useFlags();
+  const [interceptorsReady, setInterceptorsReady] = useState(false);
 
   useEffect(() => {
     if (!flags) {
       console.error('Missing flags for response interceptor configuration');
+      return;
     }
+    const isFederatedAuth = Boolean(flags?.FEDERATED_LOGIN_ENABLED);
+    setupRequestInterceptor({
+      isFederatedAuth,
+    });
     setupResponseInterceptor({
-      isFederatedAuth: Boolean(flags?.FEDERATED_LOGIN_ENABLED),
+      isFederatedAuth,
     });
+    setInterceptorsReady(true);
   }, [flags]);
 
+  if (!interceptorsReady) {
+    return (
+      <div className="bg-background flex h-screen w-screen items-center justify-center ">
+        <LoadingSpinner size={50}></LoadingSpinner>
+      </div>
+    );
+  }
+
   return (
     <Suspense
       fallback={

packages/react-ui/src/app/interceptors/index.ts

@@ -9,22 +9,22 @@ import {
 let requestInterceptorId: number | null = null;
 let responseInterceptorId: number | null = null;
 
-function setupRequestInterceptor(): void {
+type InterceptorOptions = {
+  isFederatedAuth: boolean;
+};
+
+export function setupRequestInterceptor({
+  isFederatedAuth,
+}: InterceptorOptions): void {
   if (requestInterceptorId === null) {
     const requestInterceptor = createRequestInterceptor();
     requestInterceptorId = axios.interceptors.request.use(requestInterceptor);
   }
 }
 
-setupRequestInterceptor();
-
-type ResponseInterceptorOptions = {
-  isFederatedAuth: boolean;
-};
-
 export function setupResponseInterceptor({
   isFederatedAuth,
-}: ResponseInterceptorOptions): void {
+}: InterceptorOptions): void {
   if (responseInterceptorId === null) {
     const responseInterceptor = isFederatedAuth
       ? createFederatedResponseInterceptor()

packages/react-ui/src/app/interceptors/response-interceptor.ts

@@ -43,7 +43,7 @@ export function createResponseInterceptor(): {
 
 export function createFederatedResponseInterceptor(): {
   onFulfilled: (response: AxiosResponse) => AxiosResponse;
-  onRejected: (error: AxiosError) => Promise<never>;
+  onRejected: (error: AxiosError) => Promise<AxiosResponse | never>;
 } {
   throw new Error('Not implemented in OSS');
 }