Better loading (and some other misc cleanup)

This commit is contained in:
Gnarwhal 2024-09-23 18:59:55 +00:00
parent bf6709e2fd
commit 3eb11d3aeb
Signed by: Gnarwhal
GPG key ID: 0989A73D8C421174
5 changed files with 60 additions and 16 deletions

View file

@ -2,6 +2,7 @@
import { useState, useEffect } from 'react' import { useState, useEffect } from 'react'
import Loading from './loading';
import ContentTypeError from './types/error/content_type'; import ContentTypeError from './types/error/content_type';
import NetworkError from './types/error/network'; import NetworkError from './types/error/network';
import StatusError from './types/error/status'; 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 />;
} }

View file

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

View file

@ -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>
);
}

View file

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