Add loading indicator

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;

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>
+	}
+}

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;
+	}
+}

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;