🚸 add feedback for refreshing notes

ulisesantana · Aug 31, 2023 · b473cce · b473cce
1 parent 9588f76
commit b473cce
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 2 deletions.
diff --git 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
@@ -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: "";
+	}
+ }
+
+
+