make loading skeleton for editor

src/components/codemirror.module.css

@@ -10,4 +10,23 @@
 
 .container :global(.cm-panels) {
 	position: unset;
+}
+
+.containerSkeleton {
+	background: linear-gradient(
+			to right,
+			rgba(255, 255, 255, 0),
+			rgba(255, 255, 255, 0.5) 50%,
+			rgba(255, 255, 255, 0) 80%
+		),
+		lightgray;
+	background-repeat: repeat-y;
+	background-size: 50px 500px;
+	background-position: 0 0;
+	animation: shine 1s infinite ease-in-out;
+}
+@keyframes shine {
+	to {
+		background-position: 100% 0, /* move highlight to right */ 0 0;
+	}
 }

src/components/codemirror.tsx

@@ -76,6 +76,13 @@ export default function CodeMirror(props: CodeMirrorProps) {
 	}, [editorRef]);
 
 	return (
-		<div class={`${styles.container} ${props.class ?? ''}`} ref={parent} />
+		<div
+			class={`${styles.container} ${
+				editorRef === undefined
+					? styles.containerSkeleton
+					: ""
+			} ${props.class ?? ""}`}
+			ref={parent}
+		/>
 	)
 }