Add Loading Component to Recent Searches Island

[babblebey]

The Recent Searches island component currently lacks a loading state, causing the UI to flicker when content is loaded. This issue aims to add a loading component to improve user experience.

screencast-localhost_4321-2024.04.05-12_20_32.webm

Tasks

1. Implement Loading State: Add a loading state to the Recent Searches island component that displays a placeholder for the section title and a set of placeholders for the list of recent searched items.
2. Style Loading Component: Style the loading component to visually indicate that content is loading. Consider using placeholders that mimic the size and layout of the actual content.
3. Integrate Loading Component: Integrate the loading component into the Recent Searches island so that it is displayed while the actual content is being fetched.

Related Files

• recent-searches.jsx component in the src/components/islands directory

Acceptance Criteria

• The loading component is displayed when the Recent Searches island is loading.
• The loading component accurately represents the layout of the actual content.

Additional Notes

• Ensure that the loading component is visually appealing and informative.
• Consider using animations or transitions to indicate the loading process.

[amiabl-programr]

Hi, can I be assigned to this?

[babblebey]

Sure @amiabl-programr,

Kindly share how you intend to implement this, I do have ideas but I'd like it to maybe augment your approach 😉

[amiabl-programr]

I'd create a loading component in the same folder, and pass down the recent searches data to the loading component as a prop from "recent-searches.jsx" to get the exact size of each item in the recent searches section.

The loading component will be visible while the data is being fetched, and a delay of 2s will be added to prevent the loader from flashing in case the data was returned very fast.

[babblebey]

I'd create a loading component in the same folder, and pass down the recent searches data to the loading component as a prop from "recent-searches.jsx" to get the exact size of each item in the recent searches section.

The loading component will be visible while the data is being fetched, and a delay of 2s will be added to prevent the loader from flashing in case the data was returned very fast.

Haha, yea.... this was how you approached it 😃

But, this is still working with what's already loaded on the client-side. Not what I would've done nor what I was expecting yea 😉

The "recent-searches.jsx" component/island is server rendered by default... What I was looking at what to have a loading component come with the default component view and once it gets to the client-side , then it looks up the localStorage and either load the searchItems or displays something else or just disappears.

I was looking to have this clear discussion before you started a PR 😉

[amiabl-programr]

Well, you just replied... 🥲