From dac7d26a14cd612dd6841aae698355bccf78559b Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Wed, 23 Sep 2020 15:16:34 +0300
Subject: [PATCH] Loading style

---
 playground.js | 21 +++++++++++++--------
 style.css     | 14 ++++++++++++++
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/playground.js b/playground.js
index a48657f..5ed93ce 100644
--- a/playground.js
+++ b/playground.js
@@ -29,6 +29,16 @@ if (url) {
 	cssURL.value = url;
 }
 
+queryRerun.onclick = async e => {
+	if (!window.AST) {
+		return;
+	}
+
+	let query = selectQuery.value;
+	let result = await testQuery(query);
+	queryResults.textContent = JSON.stringify(result, null, "\t");
+}
+
 async function update() {
 	if (cssCode.value) {
 		try {
@@ -43,6 +53,7 @@ async function update() {
 	}
 	else if (cssURL.value) {
 		let url = cssURL.value;
+		cssURL.classList.add("loading");
 		let response = await fetch('https://cors-anywhere.herokuapp.com/' + url);
 		let css;
 		let mime = response.headers.get("Content-Type");
@@ -63,7 +74,9 @@ async function update() {
 			css = css.join("\n")
 		}
 
+		cssURL.classList.remove("loading");
 		cssCodeDisplay.textContent = css;
+
 		try {
 			AST = parse(css);
 		}
@@ -101,15 +114,7 @@ cssCode.addEventListener("input", evt => {
 	localStorage.cssCode = cssCode.value;
 });
 
-queryRerun.onclick = async e => {
-	if (!window.AST) {
-		return;
-	}
 
-	let query = selectQuery.value;
-	let result = await testQuery(query);
-	queryResults.textContent = JSON.stringify(result, null, "\t");
-}
 
 queryTab.addEventListener("tabselect", queryRerun.onclick);
 
diff --git a/style.css b/style.css
index e1108d3..e343ccf 100644
--- a/style.css
+++ b/style.css
@@ -4,6 +4,9 @@ body {
 
 input, textarea {
 	font: inherit;
+	border: 1px solid hsl(220 10% 80%);
+	border-radius: .2em;
+	padding: .2em .4em;
 }
 
 #cssForm label {
@@ -39,3 +42,14 @@ textarea {
 simple-tabs {
 	margin-top: .5em;
 }
+
+@keyframes loading {
+	from {
+		background-position-x: 200%;
+	}
+}
+
+#cssURL.loading {
+	background: linear-gradient(to right, hsl(220, 10%, 95%) 30%, white, hsl(220, 10%, 95%) 70%) 0 0 / 200% auto;
+	animation: loading 1s infinite linear;
+}