Better loading (and some other misc cleanup)

src/app/[...file]/components/content.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from 'react'
 
+import Loading          from './loading';
 import ContentTypeError from './types/error/content_type';
 import NetworkError     from './types/error/network';
 import StatusError      from './types/error/status';
@@ -109,5 +110,5 @@ export default function Content({ src }: { src: string}) {
 		}
 	});
 
-	return content ?? <p>Loading...</p>;
+	return content ?? <Loading />;
 }

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

@@ -10,20 +10,20 @@ export const copy = style({
 });
 
 export const copy_button = style({
-	display:         'flex',
+	display:    'flex',
-	margin:          0,
+	margin:     0,
-	border:          'none',
+	border:     'none',
-	padding:         0,
+	padding:    0,
-	outline:         'inherit',
+	outline:    'inherit',
-	fontFamily:      'monospace',
+	fontFamily: 'monospace',
-	fontSize:        '1.1em',
+	fontSize:   '1.1em',
-	lineHeight:      '2em',
+	lineHeight: '2em',
-	color:           'inherit',
+	color:      'inherit',
-	whiteSpace:      'pre-wrap',
+	whiteSpace: 'pre-wrap',
-	transition:      'background-color 0.35s',
+	transition: 'background-color 0.35s',
-	background:      'none',
+	background: 'none',
-	width:           'max-content',
+	width:      'max-content',
-	height:          '100%',
+	height:     '100%',
 	':hover': {
 		backgroundColor: colors.background2,
 	},

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`
+	}])
+);
+
+

src/app/[...file]/components/loading.tsx

@@ -0,0 +1,9 @@
+import * as style from './loading.css';
+
+export default function Loading() {
+	return (
+		<div className={style.loading_squares}>
+			{style.loading.map((style, index) => <div key={index} className={style}></div>)}
+		</div>
+	);
+}

src/app/page.tsx

@@ -2,7 +2,6 @@ import * as style from './page.css';
 
 export default function App() {
 	const supports_repointing = process.env.ENABLE_REPOINTING == 'true';
-	console.log(supports_repointing);
 	return (
 		<div className={style.center}>
 			<div className={style.content}>