Notification toasts, nicer loading, add new user support

frontend/src/components/HasPermission.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import Alert from "react-bootstrap/Alert";
+import { Loading, LoadingPage } from "src/components";
 import { useUser } from "src/hooks";
 import { intl } from "src/locale";
 
@@ -8,11 +9,30 @@ interface Props {
 	type: "manage" | "view";
 	hideError?: boolean;
 	children?: ReactNode;
+	pageLoading?: boolean;
+	loadingNoLogo?: boolean;
 }
-function HasPermission({ permission, type, children, hideError = false }: Props) {
-	const { data } = useUser("me");
+function HasPermission({
+	permission,
+	type,
+	children,
+	hideError = false,
+	pageLoading = false,
+	loadingNoLogo = false,
+}: Props) {
+	const { data, isLoading } = useUser("me");
 	const perms = data?.permissions;
 
+	if (isLoading) {
+		if (hideError) {
+			return null;
+		}
+		if (pageLoading) {
+			return <LoadingPage noLogo={loadingNoLogo} />;
+		}
+		return <Loading noLogo={loadingNoLogo} />;
+	}
+
 	let allowed = permission === "";
 	const acceptable = ["manage", type];
 

frontend/src/components/Loading.tsx

@@ -0,0 +1,22 @@
+import { intl } from "src/locale";
+import styles from "./Loading.module.css";
+
+interface Props {
+	label?: string;
+	noLogo?: boolean;
+}
+export function Loading({ label, noLogo }: Props) {
+	return (
+		<div className="empty text-center">
+			{noLogo ? null : (
+				<div className="mb-3">
+					<img className={styles.logo} src="/images/logo-no-text.svg" alt="" />
+				</div>
+			)}
+			<div className="text-secondary mb-3">{label || intl.formatMessage({ id: "loading" })}</div>
+			<div className="progress progress-sm">
+				<div className="progress-bar progress-bar-indeterminate" />
+			</div>
+		</div>
+	);
+}

frontend/src/components/LoadingPage.tsx

@@ -1,6 +1,4 @@
-import { Page } from "src/components";
-import { intl } from "src/locale";
-import styles from "./LoadingPage.module.css";
+import { Loading, Page } from "src/components";
 
 interface Props {
 	label?: string;
@@ -10,17 +8,7 @@ export function LoadingPage({ label, noLogo }: Props) {
 	return (
 		<Page className="page-center">
 			<div className="container-tight py-4">
-				<div className="empty text-center">
-					{noLogo ? null : (
-						<div className="mb-3">
-							<img className={styles.logo} src="/images/logo-no-text.svg" alt="" />
-						</div>
-					)}
-					<div className="text-secondary mb-3">{label || intl.formatMessage({ id: "loading" })}</div>
-					<div className="progress progress-sm">
-						<div className="progress-bar progress-bar-indeterminate" />
-					</div>
-				</div>
+				<Loading label={label} noLogo={noLogo} />
 			</div>
 		</Page>
 	);

frontend/src/components/index.ts

@@ -2,6 +2,7 @@ export * from "./Button";
 export * from "./ErrorNotFound";
 export * from "./Flag";
 export * from "./HasPermission";
+export * from "./Loading";
 export * from "./LoadingPage";
 export * from "./LocalePicker";
 export * from "./NavLink";