feat: create new dashboard (layout, navbar, list of links)

inertia/components/dashboard/link/link_favicon.tsx

@@ -1,8 +1,7 @@
-import styled from '@emotion/styled';
+import { Center, Loader } from '@mantine/core';
 import { useEffect, useRef, useState } from 'react';
-import { TbLoader3 } from 'react-icons/tb';
 import { TfiWorld } from 'react-icons/tfi';
-import { rotate } from '~/styles/keyframes';
+import styles from './link_favicon.module.css';
 
 const IMG_LOAD_TIMEOUT = 7_500;
 
@@ -11,27 +10,6 @@ interface LinkFaviconProps {
 	size?: number;
 }
 
-const Favicon = styled.div({
-	position: 'relative',
-	display: 'flex',
-	alignItems: 'center',
-	justifyContent: 'center',
-});
-
-const FaviconLoader = styled.div(({ theme }) => ({
-	position: 'absolute',
-	top: 0,
-	left: 0,
-	color: theme.colors.font,
-	backgroundColor: theme.colors.secondary,
-
-	'& > *': {
-		animation: `${rotate} 1s both reverse infinite linear`,
-	},
-}));
-
-// The Favicon API should always return an image, so it's not really useful to keep the loader nor placeholder icon,
-// but for slow connections and other random stuff, I'll keep this
 export default function LinkFavicon({ url, size = 32 }: LinkFaviconProps) {
 	const imgRef = useRef<HTMLImageElement>(null);
 
@@ -47,7 +25,6 @@ export default function LinkFavicon({ url, size = 32 }: LinkFaviconProps) {
 	};
 
 	useEffect(() => {
-		// Ugly hack, onLoad cb not triggered on first load when SSR
 		if (imgRef.current?.complete) {
 			handleStopLoading();
 			return;
@@ -57,7 +34,7 @@ export default function LinkFavicon({ url, size = 32 }: LinkFaviconProps) {
 	}, [isLoading]);
 
 	return (
-		<Favicon>
+		<div className={styles.favicon}>
 			{!isFailed ? (
 				<img
 					src={`/favicon?url=${url}`}
@@ -73,10 +50,13 @@ export default function LinkFavicon({ url, size = 32 }: LinkFaviconProps) {
 				<TfiWorld size={size} />
 			)}
 			{isLoading && (
-				<FaviconLoader style={{ height: `${size}px`, width: `${size}px` }}>
-					<TbLoader3 size={size} />
-				</FaviconLoader>
+				<Center
+					className={styles.faviconLoader}
+					style={{ height: `${size}px`, width: `${size}px` }}
+				>
+					<Loader size="xs" />
+				</Center>
 			)}
-		</Favicon>
+		</div>
 	);
 }