Abstraction for displaying components delayed

New DelayedLoadingOverlay

src/components/Delayed/Delayed.tsx

@@ -0,0 +1,33 @@
+import {useEffect, useState} from 'react';
+import {LoadingOverlayProps, SkeletonProps} from '@mantine/core';
+
+type DelayedComponentProps = SkeletonProps | LoadingOverlayProps;
+type DelayedProps<ComponentProps extends DelayedComponentProps> = ComponentProps & {
+	component: any;
+};
+
+/**
+ * Shows children after this delay
+ */
+const DELAY = 700;
+
+/**
+ * Shows children after a delay of {@link DELAY}ms
+ */
+export function Delayed<ComponentProps extends DelayedComponentProps>(props: DelayedProps<ComponentProps>): JSX.Element {
+	const {component: DelayedComponent, ...componentProps} = props;
+
+	const [visible, setVisible] = useState(false);
+
+	useEffect(() => {
+		const timer = setTimeout(() => setVisible(true), DELAY);
+		return (): void => {
+			clearTimeout(timer);
+		};
+	}, [componentProps]);
+
+	if (visible) {
+		return <DelayedComponent {...componentProps}/>;
+	}
+	return <></>;
+}

src/components/Delayed/DelayedLoadingOverlay.tsx

@@ -0,0 +1,11 @@
+import {LoadingOverlay, LoadingOverlayProps} from '@mantine/core';
+import {Delayed} from './Delayed';
+
+/**
+ * Shows a loading overlay after a delay
+ *
+ * @see {@link Delayed}
+ */
+export function DelayedLoadingOverlay(props: LoadingOverlayProps): JSX.Element {
+	return <Delayed component={LoadingOverlay} {...props}/>;
+}

src/components/Delayed/DelayedSkeleton.tsx

@@ -0,0 +1,11 @@
+import {Skeleton, SkeletonProps} from '@mantine/core';
+import {Delayed} from './Delayed';
+
+/**
+ * Shows a skeleton after a delay
+ *
+ * @see {@link Delayed}
+ */
+export function DelayedSkeleton(props: SkeletonProps): JSX.Element {
+	return <Delayed component={Skeleton} {...props}/>;
+}

src/features/event/details/EventDetailsLoading.tsx

@@ -1,6 +1,6 @@
 import {Box, Container, Grid, MediaQuery, Text, Title} from '@mantine/core';
 import {NAV_HEIGHT} from '../../../components/nav/Nav';
-import {DelayedSkeleton} from '../../../components/DelayedSkeleton';
+import {DelayedSkeleton} from '../../../components/Delayed/DelayedSkeleton';
 
 export function EventDetailsLoading(): JSX.Element {
 	return (

src/features/event/edit/EventEditLoading.tsx

@@ -1,4 +1,4 @@
-import {DelayedSkeleton} from '../../../components/DelayedSkeleton';
+import {DelayedSkeleton} from '../../../components/Delayed/DelayedSkeleton';
 import {NAV_HEIGHT} from '../../../components/nav/Nav';
 import {Container, Grid, Stack, Text, Title} from '@mantine/core';
 

src/features/guilds/GuildsNavbar.tsx

@@ -2,7 +2,7 @@ import {Avatar, Button, createStyles, Image, Navbar, ScrollArea} from '@mantine/
 import {useGetGuilds} from './useGetGuilds';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faPeopleGroup} from '@fortawesome/free-solid-svg-icons';
-import {DelayedSkeleton} from '../../components/DelayedSkeleton';
+import {DelayedSkeleton} from '../../components/Delayed/DelayedSkeleton';
 import {NAV_HEIGHT} from '../../components/nav/Nav';
 import {AnchorLink} from '../../components/Text/AnchorLink';
 import {SpotlightAction} from '@mantine/spotlight';

src/features/guilds/guild/GuildEventTypes.tsx

@@ -1,7 +1,7 @@
 import {useGetEventTypes} from '../../event/action/generalInformation/useGetEventTypes';
 import {GuildProps} from './Guild';
 import {Badge, ColorSwatch, CopyButton, Table} from '@mantine/core';
-import {DelayedSkeleton} from '../../../components/DelayedSkeleton';
+import {DelayedSkeleton} from '../../../components/Delayed/DelayedSkeleton';
 import {T} from '../../../components/T';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faCopy} from '@fortawesome/free-regular-svg-icons';