Better loading (and some other misc cleanup)

src/app/[...file]/components/loading.css.ts

@@ -0,0 +1,35 @@
+import { keyframes, style } from '@vanilla-extract/css';
+
+import * as colors from '../../colors.css';
+
+export const loading_squares = style({
+	display:        'flex',
+	justifyContent: 'center',
+	width:          '100%',
+	marginTop:      '4em',
+	height:         'max-content',
+});
+
+const animation = keyframes({
+	'0%':   { backgroundColor: colors.background2 },
+	'50%':  { backgroundColor: colors.foreground  },
+	'100%': { backgroundColor: colors.background2 },
+});
+
+export const square = style({
+	margin:                  '0 1em',
+	width:                   '1em',
+	height:                  '1em',
+	backgroundColor:         colors.background2,
+	animationName:           animation,
+	animationDuration:       '2s',
+	animationIterationCount: 'infinite',
+});
+
+export const loading = [0, 1, 2, 3, 4].map(index =>
+	style([square, {
+		animationDelay: `${0.2 * index}s`
+	}])
+);
+
+