Extract page spinner (#1727)

<!--
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.
-->

Part of OPS-3144

Author: alexandrudanpop

packages/react-ui/src/app/app-bootstrap.tsx

@@ -1,5 +1,6 @@
-import { LoadingSpinner } from '@openops/components/ui';
 import { useEffect, useState } from 'react';
+
+import { FullPageSpinner } from './common/components/full-page-spinner';
 import { QueryKeys } from './constants/query-keys';
 import { flagsApi, FlagsMap } from './lib/flags-api';
 import { initializeInternal } from './lib/initialize-internal';
@@ -51,11 +52,7 @@ export function AppBootstrap({ children }: Readonly<AppBootstrapProps>) {
   }, []);
 
   if (state.status === 'loading') {
-    return (
-      <div className="flex h-screen w-screen items-center justify-center">
-        <LoadingSpinner size={50} />
-      </div>
-    );
+    return <FullPageSpinner />;
   }
 
   if (state.status === 'error') {

packages/react-ui/src/app/common/components/full-page-spinner.tsx

@@ -0,0 +1,11 @@
+import { LoadingSpinner } from '@openops/components/ui';
+
+type FullPageSpinnerProps = {
+  size?: number;
+};
+
+export const FullPageSpinner = ({ size = 50 }: FullPageSpinnerProps) => (
+  <div className="bg-background flex h-screen w-screen items-center justify-center">
+    <LoadingSpinner size={size} />
+  </div>
+);

packages/react-ui/src/app/common/guards/allow-logged-in-user-only-guard.tsx

@@ -1,10 +1,10 @@
-import { LoadingSpinner } from '@openops/components/ui';
 import dayjs from 'dayjs';
 import { jwtDecode } from 'jwt-decode';
 import { Suspense, useEffect } from 'react';
 import { Navigate, useLocation, useNavigate } from 'react-router-dom';
 
 import { getFederatedUrlBasedOnFlags } from '@/app/common/auth/lib/utils';
+import { FullPageSpinner } from '@/app/common/components/full-page-spinner';
 import { flagsHooks } from '@/app/common/hooks/flags-hooks';
 import { platformHooks } from '@/app/common/hooks/platform-hooks';
 import { projectHooks } from '@/app/common/hooks/project-hooks';
@@ -46,13 +46,7 @@ const LoggedIn = ({ children }: { children: React.ReactNode }) => {
   appConnectionsHooks.useConnectionsMetadata();
 
   return (
-    <Suspense
-      fallback={
-        <div className=" flex h-screen w-screen items-center justify-center ">
-          <LoadingSpinner size={50}></LoadingSpinner>
-        </div>
-      }
-    >
+    <Suspense fallback={<FullPageSpinner />}>
       <SocketProvider>{children}</SocketProvider>
     </Suspense>
   );

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

@@ -1,6 +1,6 @@
-import { LoadingSpinner } from '@openops/components/ui';
 import { Suspense, useEffect, useState } from 'react';
 
+import { FullPageSpinner } from '@/app/common/components/full-page-spinner';
 import { flagsHooks } from '@/app/common/hooks/flags-hooks';
 import {
   setupRequestInterceptor,
@@ -32,22 +32,8 @@ export const InitialDataGuard = ({
   }, [flags]);
 
   if (!interceptorsReady) {
-    return (
-      <div className="bg-background flex h-screen w-screen items-center justify-center ">
-        <LoadingSpinner size={50}></LoadingSpinner>
-      </div>
-    );
+    return <FullPageSpinner />;
   }
 
-  return (
-    <Suspense
-      fallback={
-        <div className="bg-background flex h-screen w-screen items-center justify-center ">
-          <LoadingSpinner size={50}></LoadingSpinner>
-        </div>
-      }
-    >
-      {children}
-    </Suspense>
-  );
+  return <Suspense fallback={<FullPageSpinner />}>{children}</Suspense>;
 };

packages/react-ui/src/app/routes/flows/id/index.tsx

@@ -1,16 +1,16 @@
-import { FlowDetailsPanel } from '@/app/features/flows/components/flow-details-panel';
-import { LoadingSpinner } from '@openops/components/ui';
 import { PopulatedFlow } from '@openops/shared';
 import { useQuery } from '@tanstack/react-query';
 import { useEffect } from 'react';
 import { Navigate, useParams, useSearchParams } from 'react-router-dom';
 
+import { FullPageSpinner } from '@/app/common/components/full-page-spinner';
 import { QueryKeys } from '@/app/constants/query-keys';
 import { SEARCH_PARAMS } from '@/app/constants/search-params';
 import { BuilderPage } from '@/app/features/builder';
 import { BuilderHeader } from '@/app/features/builder/builder-header/builder-header';
 import { BuilderPublishButton } from '@/app/features/builder/builder-header/builder-publish-button';
 import { BuilderStateProvider } from '@/app/features/builder/builder-state-provider';
+import { FlowDetailsPanel } from '@/app/features/flows/components/flow-details-panel';
 import { flowsApi } from '@/app/features/flows/lib/flows-api';
 import { AxiosError } from 'axios';
 
@@ -59,11 +59,7 @@ const FlowBuilderPage = () => {
   }
 
   if (isLoading) {
-    return (
-      <div className="bg-background flex h-screen w-screen items-center justify-center ">
-        <LoadingSpinner size={50}></LoadingSpinner>
-      </div>
-    );
+    return <FullPageSpinner />;
   }
 
   return (

packages/react-ui/src/app/routes/runs/id/index.tsx

@@ -1,7 +1,7 @@
-import { LoadingSpinner } from '@openops/components/ui';
 import { useQuery } from '@tanstack/react-query';
 import { useParams } from 'react-router-dom';
 
+import { FullPageSpinner } from '@/app/common/components/full-page-spinner';
 import { QueryKeys } from '@/app/constants/query-keys';
 import { BuilderPage } from '@/app/features/builder';
 import { BuilderHeader } from '@/app/features/builder/builder-header/builder-header';
@@ -38,11 +38,7 @@ const FlowRunPage = () => {
   });
 
   if (isLoading) {
-    return (
-      <div className="bg-background flex h-screen w-screen items-center justify-center ">
-        <LoadingSpinner size={50}></LoadingSpinner>
-      </div>
-    );
+    return <FullPageSpinner />;
   }
 
   return (