Add Loading Component to Recent Searches Island #31
Description
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
- 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.
- 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.
- 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.jsxcomponent in thesrc/components/islandsdirectory
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.
Metadata
Metadata
Assignees
Type
Projects
Milestone
Relationships
Participants
Activity
amiabl-programr commentedon Aug 30, 2024
Hi, can I be assigned to this?
babblebey commentedon Aug 31, 2024
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 commentedon Aug 31, 2024
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 commentedon Sep 2, 2024
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 commentedon Sep 2, 2024
Well, you just replied... 🥲