diff --git a/src/app/[...file]/components/content.tsx b/src/app/[...file]/components/content.tsx
index 986ed39..fd95921 100644
--- a/src/app/[...file]/components/content.tsx
+++ b/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 ??
Loading...
;
+ return content ?? ;
}
diff --git a/src/app/[...file]/components/copy.css.ts b/src/app/[...file]/components/copy.css.ts
index 9207e53..c6d8f84 100644
--- a/src/app/[...file]/components/copy.css.ts
+++ b/src/app/[...file]/components/copy.css.ts
@@ -10,20 +10,20 @@ export const copy = style({
});
export const copy_button = style({
- display: 'flex',
- margin: 0,
- border: 'none',
- padding: 0,
- outline: 'inherit',
- fontFamily: 'monospace',
- fontSize: '1.1em',
- lineHeight: '2em',
- color: 'inherit',
- whiteSpace: 'pre-wrap',
- transition: 'background-color 0.35s',
- background: 'none',
- width: 'max-content',
- height: '100%',
+ display: 'flex',
+ margin: 0,
+ border: 'none',
+ padding: 0,
+ outline: 'inherit',
+ fontFamily: 'monospace',
+ fontSize: '1.1em',
+ lineHeight: '2em',
+ color: 'inherit',
+ whiteSpace: 'pre-wrap',
+ transition: 'background-color 0.35s',
+ background: 'none',
+ width: 'max-content',
+ height: '100%',
':hover': {
backgroundColor: colors.background2,
},
diff --git a/src/app/[...file]/components/loading.css.ts b/src/app/[...file]/components/loading.css.ts
new file mode 100644
index 0000000..33f4ae6
--- /dev/null
+++ b/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`
+ }])
+);
+
+
diff --git a/src/app/[...file]/components/loading.tsx b/src/app/[...file]/components/loading.tsx
new file mode 100644
index 0000000..730c431
--- /dev/null
+++ b/src/app/[...file]/components/loading.tsx
@@ -0,0 +1,9 @@
+import * as style from './loading.css';
+
+export default function Loading() {
+ return (
+
+ {style.loading.map((style, index) =>
)}
+
+ );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0d40e07..69d19c4 100644
--- a/src/app/page.tsx
+++ b/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 (