From b473cce2e14a6091bf56bf683fba03e59c8737f1 Mon Sep 17 00:00:00 2001
From: Ulises Santana <ulisesantana@gmail.com>
Date: Thu, 31 Aug 2023 11:49:54 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20add=20feedback=20for=20refreshin?=
 =?UTF-8?q?g=20notes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/PendingNotesView.tsx | 13 ++++-
 styles.css                     | 93 ++++++++++++++++++++++++++++++++++
 2 files changed, 104 insertions(+), 2 deletions(-)

diff --git a/src/views/PendingNotesView.tsx b/src/views/PendingNotesView.tsx
index 74be173..b7d102e 100644
--- a/src/views/PendingNotesView.tsx
+++ b/src/views/PendingNotesView.tsx
@@ -10,6 +10,7 @@ interface Props {
 }
 
 export const PendingNotesView: FC<Props> = ({notes, onCreateNote, onSearchNote, onRefreshNotes}) => {
+	const [isLoading, setIsLoading] = useState(false)
 	const [items, setItems] = useState(notes)
 	const generateOnClick: (n: string) => MouseEventHandler<HTMLAnchorElement> = (note: string) => (event) => {
 		onCreateNote(note, event.nativeEvent).then(setItems)
@@ -18,13 +19,21 @@ export const PendingNotesView: FC<Props> = ({notes, onCreateNote, onSearchNote,
 		onSearchNote(title).then()
 	}
 	const refreshNotes = () => {
-		onRefreshNotes().then(setItems)
+		setIsLoading(true)
+		onRefreshNotes().then((notes) => {
+			setTimeout(() => {
+				setIsLoading(false)
+				setItems(notes)
+			}, 1000)
+		})
 	}
 	return (
 		<div className="pending-notes-view-container">
 			<div className="title">
 				<h1>Pending notes</h1>
-				<button onClick={refreshNotes}>🔄</button>
+				<button onClick={refreshNotes}>
+					{isLoading ? <div className="dots"></div> : "🔄"}
+				</button>
 			</div>
 			<span><strong>{items.length}</strong> notes linked, but not created yet. Times the note is linked is shown in parentheses.</span>
 			<ul>
diff --git a/styles.css b/styles.css
index 30dcd2d..098d905 100644
--- a/styles.css
+++ b/styles.css
@@ -45,4 +45,97 @@
 }
 
 
+.dots {
+	position: relative;
+	width: 20px;
+	height: 20px;
+	font-size: 10px;
+	line-height: 10px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: white;
+ }
+ 
+ .dots:after {
+	position: absolute;
+	content: "";
+	color: white;
+	-webkit-animation: display-dots steps(1, end) 1s infinite;
+	-moz-animation: display-dots steps(1, end) 1s infinite;
+	-o-animation: display-dots steps(1, end) 1s infinite;
+	animation: display-dots steps(1, end) 1s infinite;
+ }
+ 
+ @-webkit-keyframes display-dots {
+	0% {
+	 content: "";
+	}
+	25% {
+		content: "\2022\00A0\2022\00A0\2022";
+	}
+	50% {
+		content: "\2022\00A0\2022";
+	}
+	75% {
+		content: "\2022";
+	}
+	100% {
+	 content: "";
+	}
+ }
+ @-moz-keyframes display-dots {
+	0% {
+	 content: "";
+	}
+	25% {
+	 content: "\2022";
+	}
+	50% {
+	 content: "\2022\00A0\2022";
+	}
+	75% {
+	 content: "\2022\00A0\2022\00A0\2022";
+	}
+	100% {
+	 content: "";
+	}
+ }
+ @-o-keyframes display-dots {
+	0% {
+	 content: "";
+	}
+	25% {
+	 content: "\2022";
+	}
+	50% {
+	 content: "\2022\00A0\2022";
+	}
+	75% {
+	 content: "\2022\00A0\2022\00A0\2022";
+	}
+	100% {
+	 content: "";
+	}
+ }
+ @keyframes display-dots {
+	0% {
+	 content: "";
+	}
+	25% {
+	 content: "\2022";
+	}
+	50% {
+	 content: "\2022\00A0\2022";
+	}
+	75% {
+	 content: "\2022\00A0\2022\00A0\2022";
+	}
+	100% {
+	 content: "";
+	}
+ }
+ 
+
+