From ddcb4a5be7c69ff4a952d170d4a25e8254be4648 Mon Sep 17 00:00:00 2001
From: Ethan Girouard <ethan@girouard.com>
Date: Mon, 4 Nov 2024 15:13:07 -0500
Subject: [PATCH] Add loading indicator

---
 src/components.rs         |  1 +
 src/components/loading.rs | 19 +++++++++++++
 style/loading.scss        | 59 +++++++++++++++++++++++++++++++++++++++
 style/main.scss           |  1 +
 4 files changed, 80 insertions(+)
 create mode 100644 src/components/loading.rs
 create mode 100644 style/loading.scss

diff --git a/src/components.rs b/src/components.rs
index 893727c..023602d 100644
--- a/src/components.rs
+++ b/src/components.rs
@@ -6,3 +6,4 @@ pub mod dashboard_tile;
 pub mod dashboard_row;
 pub mod upload;
 pub mod song_list;
+pub mod loading;
diff --git a/src/components/loading.rs b/src/components/loading.rs
new file mode 100644
index 0000000..b3de9cd
--- /dev/null
+++ b/src/components/loading.rs
@@ -0,0 +1,19 @@
+use leptos::*;
+
+/// A loading indicator
+#[component]
+pub fn Loading() -> impl IntoView {
+	view! {
+		<div class="loading"></div>
+	}
+}
+
+/// A full page, centered loading indicator
+#[component]
+pub fn LoadingPage() -> impl IntoView {
+	view!{
+		<div class="loading-page">
+			<Loading />
+		</div>
+	}
+}
diff --git a/style/loading.scss b/style/loading.scss
new file mode 100644
index 0000000..89ae90e
--- /dev/null
+++ b/style/loading.scss
@@ -0,0 +1,59 @@
+@import "theme.scss";
+
+.loading-page {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
+}
+
+.loading {
+	position: relative;
+	width: 10px;
+	height: 10px;
+	border-radius: 5px;
+	margin: 10px;
+	background-color: $accent-color;
+	color: $accent-color;
+	animation: dot-flashing 1s infinite linear alternate;
+	animation-delay: 0.5s;
+}
+
+.loading::before, .loading::after {
+	content: "";
+	display: inline-block;
+	position: absolute;
+	top: 0;
+}
+
+.loading::before {
+	left: -15px;
+	width: 10px;
+	height: 10px;
+	border-radius: 5px;
+	background-color: $accent-color;
+	color: $accent-color;
+	animation: dot-flashing 1s infinite alternate;
+	animation-delay: 0s;
+}
+
+.loading::after {
+	left: 15px;
+	width: 10px;
+	height: 10px;
+	border-radius: 5px;
+	background-color: $accent-color;
+	color: $accent-color;
+	animation: dot-flashing 1s infinite alternate;
+	animation-delay: 1s;
+}
+
+@keyframes dot-flashing {
+	0% {
+		background-color: $accent-color;
+	}
+
+	50%, 100% {
+		background-color: $controls-hover-color;
+	}
+}
diff --git a/style/main.scss b/style/main.scss
index 99faa8b..c581d58 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -13,6 +13,7 @@
 @import 'upload.scss';
 @import 'error.scss';
 @import 'song_list.scss';
+@import 'loading.scss';
 
 body {
   font-family: sans-serif;