alemi/upub
alemi/upub
1
0
Fork 1
Code Issues 4 Pull requests Projects Releases Packages 1 Wiki Activity Actions

feat(web): loading blinking dots

Browse source
This commit is contained in:
əlemi 2024-05-23 04:07:43 +02:00
parent 467cf3c92c
commit 90ae05c5d1
Signed by: alemi
GPG key ID: A4895B84D311642C
3 changed files with 32 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
web/index.html
View file

@ -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>

12
web/src/components/timeline.rs
View file

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

13
web/src/page/debug.rs
View file

@ -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() {
serde_json::to_string_pretty(&o).unwrap_or_else(|e| e.to_string()).into_view()
} else {
view! { <DocumentNode obj=o /> }.into_view()
})}
{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)) />