feat: Add loading component to recent search #94
Conversation
chore: Remove the @astrojs/node package from the dependencies (jargonsdev#89)
fix(build): Rename project in package.json (jargonsdev#90)
fix(build): Move tailwindcss to devDependencies (jargonsdev#91)
fix(build): Move '@types/react' to devDependencies (jargonsdev#92)
fix(build): remove @octokit-next/core package from dependencies (jargonsdev#93)
…into add-loading-component-to-recent-search
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Fine stuff there @amiabl-programr 😉. But, this doesn't meet the implementation criteria 🤔
Your current implementation works with the data present on the client-side, hence only loads when the data is ready i.e. when the RecentSearch component/island is hydrated. This means we already have the data but we're still playing/faking loading 🤔
One downside to this current implementation is "What happens when I don't have any saved search?"
screencast-bpconcjcammlapcogcnnelfmaeghhagj-2024.09.02-15_22_35.webm
Kindly note that the RecentSearch component/island is server-rendered by default, it gets hydrated on client-side hence receives any currently stored search item in localStorage and load the search items.
The primary intention is to have a loader come ready from the server-rendered island, and displays the search items when it finds some stored in localStorage or disappear when none exists.
|
If there's no recent search, it should display "no recent search"? |
|
Here's my thought in Visuals 😉 |
Ok, I think I understand now |
|
Hey @amiabl-programr, How's it going with you?? Need any help here??? 😉 |
|
I'll update the PR this evening |
amiabl-programr
force-pushed
the
add-loading-component-to-recent-search
branch
from
6f7380c
to
1c31f7a
Compare
| </ol> | ||
| </div> | ||
| </ol> | ||
| </div> | ||
| ) : null; |
There was a problem hiding this comment.
The recentSearches will be false on the server, so the LoadingComponent in place of null would be loaded from the server until hydrated on the client to either load the recent searches in local storage or not
There was a problem hiding this comment.
Okay... But if the local storage is empty, the loading component will remain on the page
There was a problem hiding this comment.
Oh my! that is true 🤔
So, we could use an Effect to understand when the page is loaded then kick the LoadingComponent or RecentSearchComponent or null on that, something like....
const [ready, setReady] = useState(false);
useEffect(() => {
setReady(true);
}, []);
// This loads from the server while page isn't ready or not hydrated
if (!ready) {
return <LoadingComponent />
}
// After Hydration, useEffect kicks in to either display the recentSearch if found or not; removing the LoadingComponent for sure
return Object.values(recentSearches).length ? (
<div className="space-y-3 ml-2 mt-4 md:mt-6">
<h2 className="text-2xl md:text-4xl font-black">Recent</h2>
<ol className="space-y-1.5 underline">
{Object.values(recentSearches).slice(0, 5).map((item, i) => (
<li key={i}>
<a href={item.url}>
{item.word}
</a>
</li>
))}
</ol>
</div>
) : null;Thinking out loud here 😉
There was a problem hiding this comment.
Hey @amiabl-programr,
Great stuff here, but I believe we can keep this super simple removing the overheads of introducing the new components and consumption of the browser apis 🤔
The LoadingComponent can be declared/created locally within the recent-search island and used in the null block of the component
Alright |
Description
This PR adds a loading component to recent searches
Related Issue
Resolves #31
Screenshots/Screencasts