1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
//! The placeholder the list page shows while its rows load.
use tablo_ui::{table, table_body, table_cell, table_row};
use topcoat::{Result, context::Cx, view::*};
use super::{super::WiredTable, BAR_CLASS, Frame, core::table_frame};
use crate::{BoxFuture, table::TableState};
impl<M> WiredTable<M> {
/// Render the skeleton placeholder table shown while rows load.
pub(crate) async fn render_skeleton<'a>(
&self,
cx: &'a Cx,
state: &TableState,
) -> Result<BoxView<'a>>
where
M: toasty::schema::Model,
{
self.frame().render_skeleton(cx, state).await
}
}
impl Frame<'_> {
/// Boxed for the reason [`Frame::render_page`] is.
fn render_skeleton<'f, 'a: 'f>(
&'f self,
cx: &'a Cx,
state: &'f TableState,
) -> BoxFuture<'f, Result<BoxView<'a>>> {
Box::pin(self.render_placeholder(cx, state))
}
async fn render_placeholder<'a>(&self, cx: &'a Cx, state: &TableState) -> Result<BoxView<'a>> {
let with_actions = self.with_actions();
let with_bulk = self.bulk_enabled();
let head = self
.render_thead(cx, state, "", with_actions, with_bulk, None)
.await?;
let column_count = self.columns.len();
let search_pulse = self.search;
let filter_pulse = self.filter_menu;
let content = view! {
cx =>
// The toolbar's one row: the bulk actions stay hidden until a row is selected.
if search_pulse || filter_pulse {
<div class=(BAR_CLASS) aria-hidden="true">
if search_pulse {
<div
class="animate-pulse rounded-md bg-foreground/10 h-9 w-full sm:w-72"
></div>
}
if filter_pulse {
<div
class="ml-auto animate-pulse rounded-md bg-foreground/10 h-9 w-24"
></div>
}
</div>
}
// Alone in a box, the registry table draws no border: the bars beside it draw theirs.
<div>
table(
(head)
table_body(
#[key(i)]
for i in 0..3 {
table_row(
if with_bulk {
table_cell(
<div
class="animate-pulse rounded-md bg-foreground/10 h-4 w-4"
></div>
)
}
for _ in 0..column_count {
table_cell(
<div
class="animate-pulse rounded-md bg-foreground/10 h-4 w-full"
></div>
)
}
if with_actions {
table_cell(
<div
class="animate-pulse rounded-md bg-foreground/10 h-4 w-12"
></div>
)
}
)
}
)
)
</div>
<div class="border-t border-border p-3" aria-hidden="true">
<div class="animate-pulse rounded-md bg-foreground/10 h-9 w-40"></div>
</div>
};
Ok(table_frame(cx, true, content.boxed()))
}
}