Adding Career summary/About Artist section in the artist page like spotify

[SLASH27KushaL]

Description:

Motivation

To enrich the user experience, the artist page should provide contextual information about an artist's career. A concise summary will help users discover more about the artists they listen to and improve the application's overall quality.

Acceptance Criteria

• A short career summary (2–6 sentences) is displayed on the artist page if available.
• The source of the summary (e.g., "Source: Wikipedia") is shown with a link to the full article.
• Summaries are cached to improve performance and reduce redundant API calls.
• All licensing and attribution requirements (e.g., Wikimedia's CC BY-SA) are respected and displayed.
• A fallback message, like “No biography available,” is shown when a summary cannot be found.
• The UI gracefully handles loading states while the summary is being fetched.

Proposed Technical Solution

1. Data Fetching:

• Primary API: Use the Wikimedia REST API (/page/summary/{title}) to get concise, pre-formatted extracts.
• Artist Identification: Use an external service like MusicBrainz or Last.fm to resolve the correct Wikipedia page title from the artist's ID.
• API Module: All new data-fetching logic should be added to a dedicated src/api/externalApi.js file.

2. Caching Strategy:

• Client-Side Caching: Cache the fetched summaries in the Zustand store.
• Cache Key: Use the artist's ID as the key for the cache entry.
• Stale-While-Revalidate: On subsequent visits, display the cached data immediately while re-fetching in the background if the data is stale (e.g., older than 7 days).

3. UI Implementation:

• A new component, ArtistBio.jsx, will be created within the src/features/artist/ directory.
• This component will be responsible for:
  • Displaying the sanitized biography text.
  • Showing the source and a "Read more" link.
  • Rendering the loading and fallback states.
• The ArtistBio.jsx component will be integrated into the main ArtistPage.jsx component.

Implementation Steps

1. API Layer: Implement functions in src/api/externalApi.js to fetch artist biography data from the Wikimedia API.
2. State Management: Update the Zustand store to handle caching for artist summaries.
3. Component: Create the ArtistBio.jsx component to display the summary, source, and handle loading/fallback states.
4. Integration: Add the new ArtistBio.jsx component to the ArtistPage.jsx.
5. Attribution: Ensure the UI correctly displays any required attribution for the summary source.

[SLASH27KushaL]

@Anmol-TheDev can you please look into this and if this feature is worth shipping, then i would love to contribute to this

[Anmol-TheDev]

@SLASH27KushaL I can assign you this issue as soon as you complete your already assigned issue

[SLASH27KushaL]

@Anmol-TheDev
I just raised a pr for that issue, kindly look into it and assign this issue to me if the pr needs no further work

[SLASH27KushaL]

@Anmol-TheDev I have raised a pr for this kindly look into it, I have also resolved the conflicts