Better loading (and some other misc cleanup)

This commit is contained in:
Gnarwhal 2024-09-23 18:59:55 +00:00
parent aa12b94a01
commit d25edc1cb8
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

@ -10,20 +10,20 @@ export const copy = style({
}); });
export const copy_button = 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': { ':hover': {
backgroundColor: colors.background2, backgroundColor: colors.background2,
}, },

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}>