feat: Add loading component to recent search

[amiabl-programr]

Description

This PR adds a loading component to recent searches

Related Issue

Resolves #31

Screenshots/Screencasts

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
jargons-dev	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 20, 2024 5:24am

[babblebey]

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.

[amiabl-programr]

If there's no recent search, it should display "no recent search"?

[babblebey]

Here's my thought in Visuals 😉

[amiabl-programr]

Here's my thought in Visuals 😉

Ok, I think I understand now

[babblebey]

Hey @amiabl-programr,

How's it going with you?? Need any help here??? 😉

[amiabl-programr]

I'll update the PR this evening

[babblebey]

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

[amiabl-programr]

Okay... But if the local storage is empty, the loading component will remain on the page

[babblebey]

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 😉

[babblebey]

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