feat(src): 🔥 Loading overlay

BuildTheEarth · Nov 3, 2023 · 05e01a4 · 05e01a4
1 parent a2ffca8
commit 05e01a4
Show file tree

Hide file tree

Showing 12 changed files with 45 additions and 31 deletions.
diff --git a/src/components/Page.tsx b/src/components/Page.tsx
@@ -34,6 +34,7 @@ interface PageProps {
 	hideHeaderOnInitialScroll?: boolean;
 	style?: React.CSSProperties;
 	requiredPermissions?: string[];
+	loading?: boolean;
 }
 
 const Page = (props: PageProps) => {
@@ -45,8 +46,10 @@ const Page = (props: PageProps) => {
 	const { scrollY, scrollYProgress } = useScroll();
 	const bgPosY = useTransform(scrollYProgress, (latest) => `${latest * 5 + 50}%`);
 
-	return props.requiredPermissions && !user.hasPermissions(props.requiredPermissions) ? (
-		<ErrorPage code={403} />
+	return props.loading ? (
+		<ErrorPage code={'1'} />
+	) : props.requiredPermissions && !user.hasPermissions(props.requiredPermissions) ? (
+		<ErrorPage code={'403'} />
 	) : (
 		<>
 			<NextSeo title={props.title || props.head?.title} canonical={'https://beta.buildtheearth.net' + router.pathname} description={props.description} {...props.seo} />

diff --git a/src/pages/_error.tsx b/src/pages/_error.tsx
@@ -1,4 +1,4 @@
-import { Button, Center, Title, useMantineColorScheme, useMantineTheme } from '@mantine/core';
+import { Button, Center, Loader, Title, useMantineColorScheme, useMantineTheme } from '@mantine/core';
 
 import Page from '../components/Page';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
@@ -38,28 +38,36 @@ function ErrorPage(props: any) {
 					}}
 				>
 					<div>
-						<Title style={{ color: '#ffffff', fontSize: 220, userSelect: 'none' }} ta="center" order={1}>
-							{code}
-						</Title>
+						{code == 1 ? (
+							<Title ta="center" order={1}>
+								<Loader color="white" size="xl" />
+							</Title>
+						) : (
+							<Title style={{ color: '#ffffff', fontSize: 220, userSelect: 'none' }} ta="center" order={1}>
+								{code}
+							</Title>
+						)}
 						<Title style={{ color: '#ffffff' }} ta="center" order={1}>
 							{errors[code].title}
 						</Title>
 						<Title style={{ color: theme.colors.gray[4] }} ta="center" order={3}>
 							{errors[code].message}
 							<br />
-							<Button
-								variant="outline"
-								size="xl"
-								style={{
-									color: 'white',
-									borderColor: 'white',
-									borderWidth: 3,
-									marginTop: 'calc(var(--mantine-spacing-xl)*1.5)',
-								}}
-								onClick={() => router.back()}
-							>
-								{t('button.back', { ns: 'common' })}
-							</Button>
+							{code != 1 && (
+								<Button
+									variant="outline"
+									size="xl"
+									style={{
+										color: 'white',
+										borderColor: 'white',
+										borderWidth: 3,
+										marginTop: 'calc(var(--mantine-spacing-xl)*1.5)',
+									}}
+									onClick={() => router.back()}
+								>
+									{t('button.back', { ns: 'common' })}
+								</Button>
+							)}
 						</Title>
 					</div>
 				</Center>
@@ -78,9 +86,9 @@ export async function getStaticProps({ locale }: any) {
 export default ErrorPage;
 
 const errors: any = {
-	fallback: {
-		title: 'Something went wrong',
-		message: 'Please try again later.',
+	'1': {
+		title: 'Loading data',
+		message: 'You will be redirected shortly',
 	},
 	'301': {
 		title: 'Moved Permanently',

diff --git a/src/pages/faq/manage.tsx b/src/pages/faq/manage.tsx
@@ -149,6 +149,7 @@ const Faq: NextPage = () => {
 			}}
 			seo={{ nofollow: true, noindex: true }}
 			requiredPermissions={['faq.edit', 'faq.remove', 'faq.add']}
+			loading={!data}
 		>
 			{!data ? (
 				<></>

diff --git a/src/pages/me/claims/[id].tsx b/src/pages/me/claims/[id].tsx
@@ -80,6 +80,7 @@ const ClaimPage: NextPage = ({ claimId, data }: any) => {
 			}}
 			smallPadding
 			requiredPermissions={['account.edit', 'account.info']}
+			loading={!data}
 		>
 			{!data ? (
 				<></>

diff --git a/src/pages/me/index.tsx b/src/pages/me/index.tsx
@@ -27,8 +27,9 @@ const MePage: NextPage = () => {
 				image: 'https://cdn.buildtheearth.net/static/thumbnails/me.png',
 			}}
 			requiredPermissions={['account.info']}
+			loading={!data}
 		>
-			{data ? (
+			{data && (
 				<>
 					<p>{t('description')}</p>
 					<h2>{t('account.title')}</h2>
@@ -197,8 +198,6 @@ const MePage: NextPage = () => {
 						</>
 					)}
 				</>
-			) : (
-				<>loading</>
 			)}
 		</Page>
 	);

diff --git a/src/pages/me/settings/[type].tsx b/src/pages/me/settings/[type].tsx
@@ -58,13 +58,14 @@ const Settings: NextPage = ({ type }: any) => {
 			});
 	};
 
-	https: return data ? (
+	return (
 		<Page
 			head={{
 				title: 'Account Settings',
 				image: 'https://cdn.buildtheearth.net/static/thumbnails/me.png',
 			}}
 			requiredPermissions={['account.edit', 'account.info']}
+			loading={!data}
 		>
 			<Tabs value={type} onChange={(v) => router.push({ query: { type: v } })}>
 				<Tabs.List>
@@ -146,11 +147,6 @@ const Settings: NextPage = ({ type }: any) => {
 				</Tabs.Panel>
 			</Tabs>
 		</Page>
-	) : (
-		<Page>
-			<Title>You are not logged in</Title>
-			<Text>You need to be logged in to view this page.</Text>
-		</Page>
 	);
 };
 

diff --git a/src/pages/teams/[team]/manage/apply.tsx b/src/pages/teams/[team]/manage/apply.tsx
@@ -147,6 +147,7 @@ const Apply: NextPage = ({ data: tempData, team }: any) => {
 			}}
 			seo={{ nofollow: true, noindex: true }}
 			requiredPermissions={['team.settings.edit', 'team.socials.edit', 'team.application.edit', 'team.application.list', 'team.application.review']}
+			loading={!data}
 		>
 			<SettingsTabs team={team} loading={!data}>
 				<Modal zIndex={9999} opened={editingQuestion != null} onClose={() => setEditingQuestion(null)} title="Edit Question" centered size="lg">

diff --git a/src/pages/teams/[team]/manage/images.tsx b/src/pages/teams/[team]/manage/images.tsx
@@ -141,6 +141,7 @@ const Settings = () => {
 			}}
 			seo={{ nofollow: true, noindex: true }}
 			requiredPermissions={['team.settings.edit', 'team.socials.edit', 'team.application.edit', 'team.application.list', 'team.application.review']}
+			loading={!data}
 		>
 			<SettingsTabs team={router.query.team?.toString() || ''} loading={!data || loading}>
 				<Table.ScrollContainer minWidth={800}>

diff --git a/src/pages/teams/[team]/manage/members.tsx b/src/pages/teams/[team]/manage/members.tsx
@@ -203,6 +203,7 @@ const Settings = () => {
 			}}
 			seo={{ nofollow: true, noindex: true }}
 			requiredPermissions={['team.settings.edit', 'team.socials.edit', 'team.application.edit', 'team.application.list', 'team.application.review']}
+			loading={!(builders && managers)}
 		>
 			<SettingsTabs team={router.query.team?.toString() || ''} loading={!(builders && managers)}>
 				<SearchInput onSearch={setFilter} inputProps={{ placeholder: 'Filter...' }} />

diff --git a/src/pages/teams/[team]/manage/review/[id].tsx b/src/pages/teams/[team]/manage/review/[id].tsx
@@ -77,6 +77,7 @@ const Apply: NextPage = ({ team, id }: any) => {
 				image: 'https://cdn.buildtheearth.net/static/thumbnails/apply.png',
 			}}
 			requiredPermissions={['team.application.review']}
+			loading={!data}
 		>
 			<SettingsTabs team={team} loading={!data}>
 				{data && (

diff --git a/src/pages/teams/[team]/manage/review/index.tsx b/src/pages/teams/[team]/manage/review/index.tsx
@@ -20,6 +20,7 @@ const Review = ({ team }: any) => {
 			}}
 			seo={{ nofollow: true, noindex: true }}
 			requiredPermissions={['team.settings.edit', 'team.socials.edit', 'team.application.edit', 'team.application.list', 'team.application.review']}
+			loading={!data}
 		>
 			<SettingsTabs team={team} loading={!data}>
 				<Table.ScrollContainer minWidth={800}>

diff --git a/src/pages/teams/[team]/manage/settings.tsx b/src/pages/teams/[team]/manage/settings.tsx
@@ -87,6 +87,7 @@ const Settings = ({ data: tempData }: any) => {
 			}}
 			seo={{ nofollow: true, noindex: true }}
 			requiredPermissions={['team.settings.edit', 'team.socials.edit', 'team.application.edit', 'team.application.list', 'team.application.review']}
+			loading={!data}
 		>
 			<SettingsTabs team={data?.id} loading={!data}>
 				{data && (