From 545c4db65dff9f2cec26dbfefb3dd3b4ad996353 Mon Sep 17 00:00:00 2001
From: Cosmin-Mare <cosmintudor.mare@cnamd.onmicrosoft.com>
Date: Sat, 25 May 2024 18:06:35 +0300
Subject: [PATCH] make loading skeleton for editor

---
 src/components/codemirror.module.css | 19 +++++++++++++++++++
 src/components/codemirror.tsx        |  9 ++++++++-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/components/codemirror.module.css b/src/components/codemirror.module.css
index 808774f970..f1316d09b3 100644
--- a/src/components/codemirror.module.css
+++ b/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;
+	}
 }
\ No newline at end of file
diff --git a/src/components/codemirror.tsx b/src/components/codemirror.tsx
index db5276c452..c458ce426e 100644
--- a/src/components/codemirror.tsx
+++ b/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}
+		/>
 	)
 }