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.