feat(web): loading blinking dots

web/index.html

@@ -312,10 +312,24 @@
 		.loader {
 			animation: spin 1s linear infinite;
 		}
+		span.dots {
+			&:after {
+				animation: dots 1.5s linear infinite;
+				display: inline-block;
+				content: "";
+			}
+		}
 		@keyframes spin {
 			0% { transform: rotate(0deg); }
 			100% { transform: rotate(360deg); }
 		}
+		@keyframes dots {
+			0% { content: ""; }
+			25% { content: "."; }
+			50% { content: ".."; }
+			75% { content: "..."; }
+			100% { content: ""; }
+		}
 	</style>
 </head>
 

web/src/components/timeline.rs

@@ -125,7 +125,11 @@ pub fn TimelineReplies(tl: Timeline, root: String) -> impl IntoView {
 						}
 					})
 				}
-			>{move || if tl.loading.get() { "loading" } else { "more" }}</button>
+			>
+				{move || if tl.loading.get() {
+					view! { "loading"<span class="dots"></span> }.into_view()
+				} else { "more".into_view() }}
+			</button>
 		</div>
 	}
 }
@@ -159,7 +163,11 @@ pub fn TimelineFeed(tl: Timeline) -> impl IntoView {
 						}
 					})
 				}
-			>{move || if tl.loading.get() { "loading" } else { "more" }}</button>
+				>
+					{move || if tl.loading.get() {
+						view! { "loading"<span class="dots"></span> }.into_view()
+					} else { "more".into_view() }}
+				</button>
 		</div>
 	}
 }

web/src/page/debug.rs

@@ -66,11 +66,14 @@ pub fn DebugPage() -> impl IntoView {
 				</form>
 			</div>
 			<pre class="ma-1" class:striped=error>
-				{move || object.get().map(|o| if plain.get() {
+				{move || match object.get() {
+					None => view! { <p class="center"><span class="dots"></span></p> }.into_view(),
+					Some(o) => if plain.get() {
 						serde_json::to_string_pretty(&o).unwrap_or_else(|e| e.to_string()).into_view()
 					} else {
 						view! { <DocumentNode obj=o /> }.into_view()
-				})}
+					},
+				}}
 			</pre>
 			<p class="center">
 					<input type="checkbox" title="show plain (and valid) json" value="plain" prop:checked=plain on:input=move |ev| set_plain.set(event_target_checked(&ev)) />