examples: improve hackernews behavior

This commit is contained in:
Greg Johnston 2023-08-25 16:00:01 -04:00
parent b8098e7992
commit 9adae32847
4 changed files with 94 additions and 109 deletions

View file

@ -36,8 +36,8 @@ pub fn Stories() -> impl IntoView {
let (pending, set_pending) = create_signal(false);
let hide_more_link = move || {
pending()
|| stories.get().unwrap_or(None).unwrap_or_default().len() < 28
stories.get().unwrap_or(None).unwrap_or_default().len() < 28
|| pending()
};
view! {
@ -65,9 +65,6 @@ pub fn Stories() -> impl IntoView {
}}
</span>
<span>"page " {page}</span>
<Transition
fallback=move || view! { <p>"Loading..."</p> }
>
<span class="page-link"
class:disabled=hide_more_link
aria-hidden=hide_more_link
@ -78,7 +75,6 @@ pub fn Stories() -> impl IntoView {
"more >"
</a>
</span>
</Transition>
</div>
<main class="news-list">
<div>

View file

@ -25,9 +25,8 @@ pub fn Story() -> impl IntoView {
};
view! {
<>
<Meta name="description" content=meta_description/>
<Suspense fallback=|| view! { "Loading..." }>
<Meta name="description" content=meta_description/>
{move || story.get().map(|story| match story {
None => view! { <div class="item-view">"Error loading this story."</div> },
Some(story) => view! {
@ -63,10 +62,8 @@ pub fn Story() -> impl IntoView {
</ul>
</div>
</div>
}})
}
}})}
</Suspense>
</>
}
}

View file

@ -36,12 +36,11 @@ pub fn Stories() -> impl IntoView {
let (pending, set_pending) = create_signal(false);
let hide_more_link = move || {
pending()
|| stories.get().unwrap_or(None).unwrap_or_default().len() < 28
stories.get().unwrap_or(None).unwrap_or_default().len() < 28
|| pending()
};
view! {
<div class="news-view">
<div class="news-list-nav">
<span>
@ -65,9 +64,6 @@ pub fn Stories() -> impl IntoView {
}}
</span>
<span>"page " {page}</span>
<Transition
fallback=move || view! { <p>"Loading..."</p> }
>
<span class="page-link"
class:disabled=hide_more_link
aria-hidden=hide_more_link
@ -78,7 +74,6 @@ pub fn Stories() -> impl IntoView {
"more >"
</a>
</span>
</Transition>
</div>
<main class="news-list">
<div>

View file

@ -25,9 +25,8 @@ pub fn Story() -> impl IntoView {
};
view! {
<>
<Meta name="description" content=meta_description/>
<Suspense fallback=|| view! { "Loading..." }>
<Meta name="description" content=meta_description/>
{move || story.get().map(|story| match story {
None => view! { <div class="item-view">"Error loading this story."</div> },
Some(story) => view! {
@ -63,10 +62,8 @@ pub fn Story() -> impl IntoView {
</ul>
</div>
</div>
}})
}
}})}
</Suspense>
</>
}
}