style: center the loader

Jonath-z · Jonath-z · commit b4700da61676 · 2023-12-08T10:51:07.000+02:00
diff --git a/src/pages/communities/[slug]/challenges/[challenge_id]/index.tsx b/src/pages/communities/[slug]/challenges/[challenge_id]/index.tsx
@@ -32,6 +32,7 @@ import { getTeamByChallenge, getUserInvitesByChallenge } from "@/store/services/
 import { fetchChallenge, fetchChallengeAuthenticated } from "@/store/services/communities/challenges";
 import Loader from "@/components/ui/Loader";
 import { useRouter } from "next/router";
+import Section from "@/components/ui/Section";
 
 /**
  * interface for ChallengePage multiSelector
@@ -101,7 +102,12 @@ export default function ChallengePage(): ReactElement {
   }, [challenge, dispatch, isAuthenticated]);
 
   const headerPaths = useMemo(() => [t("communities.navigation.challenge")], [t]);
-  if (loading || !challenge || !community) return <Loader />;
+  if (loading || !challenge || !community)
+    return (
+      <Section className="h-[50vh] flex items-center justify-center">
+        <Loader />
+      </Section>
+    );
   return (
     <>
       <Head>
diff --git a/src/pages/communities/[slug]/challenges/[challenge_id]/submissions/[submission_id].tsx b/src/pages/communities/[slug]/challenges/[challenge_id]/submissions/[submission_id].tsx
@@ -17,6 +17,7 @@ import useNavigation from "@/hooks/useNavigation";
 import { fetchChallenge } from "@/store/services/communities/challenges";
 import { useRouter } from "next/router";
 import Loader from "@/components/ui/Loader";
+import Section from "@/components/ui/Section";
 
 export default function SubmissionPage() {
   const dispatch = useDispatch();
@@ -49,7 +50,12 @@ export default function SubmissionPage() {
 
   const headerPaths = useMemo(() => [t("communities.navigation.challenge")], [t]);
 
-  if (loading) return <Loader />;
+  if (loading)
+    return (
+      <Section className="h-[50vh] flex items-center justify-center">
+        <Loader />
+      </Section>
+    );
   return (
     <Wrapper paths={headerPaths}>
       <div className="flex flex-col py-4 space-y-8">
