first commit

common/resources/client/http/page-status.tsx

@@ -0,0 +1,63 @@
+import {FullPageLoader} from '@common/ui/progress/full-page-loader';
+import {errorStatusIs} from '@common/utils/http/error-status-is';
+import {NotFoundPage} from '@common/ui/not-found-page/not-found-page';
+import {PageErrorMessage} from '@common/errors/page-error-message';
+import React, {ReactNode} from 'react';
+import {UseQueryResult} from '@tanstack/react-query';
+import {Navigate} from 'react-router-dom';
+import {useAuth} from '@common/auth/use-auth';
+import useSpinDelay from '@common/utils/hooks/use-spin-delay';
+
+interface Props {
+  query: UseQueryResult;
+  show404?: boolean;
+  redirectOn404?: string;
+  loaderClassName?: string;
+  loaderIsScreen?: boolean;
+  loader?: ReactNode;
+  delayedSpinner?: boolean;
+}
+export function PageStatus({
+  query,
+  show404 = true,
+  loader,
+  loaderClassName,
+  loaderIsScreen = true,
+  delayedSpinner = true,
+  redirectOn404,
+}: Props) {
+  const {isLoggedIn} = useAuth();
+
+  const showSpinner = useSpinDelay(query.isLoading, {
+    delay: 500,
+    minDuration: 200,
+  });
+
+  if (query.isLoading) {
+    if (!showSpinner && delayedSpinner) {
+      return null;
+    }
+    return (
+      loader || (
+        <FullPageLoader className={loaderClassName} screen={loaderIsScreen} />
+      )
+    );
+  }
+
+  if (
+    query.isError &&
+    (errorStatusIs(query.error, 401) || errorStatusIs(query.error, 403)) &&
+    !isLoggedIn
+  ) {
+    return <Navigate to="/login" replace />;
+  }
+
+  if (show404 && query.isError && errorStatusIs(query.error, 404)) {
+    if (redirectOn404) {
+      return <Navigate to={redirectOn404} replace />;
+    }
+    return <NotFoundPage />;
+  }
+
+  return <PageErrorMessage />;
+}