Improve User Experience by Adding Loading Spinner or Skeleton Screen

[shivamkumar2003]

Description:
Some AyurLeaf pages take time to load data (especially cards, remedies, or images).
Add a loading spinner or skeleton placeholder while data or images are loading.
This prevents blank screens and gives users instant feedback that the content is loading.

Expected Behavior:
A centered spinner or skeleton is shown while content loads.

Spinner disappears as soon as data is fetched/rendered.

Styling consistent with AyurLeaf’s color scheme.

Works on all data-fetching pages.

Tech / Files:
Add a Loader.jsx component (React).

Use CSS animation or libraries like react-loading or react-content-loader.

Implement conditional rendering (isLoading ? : ).

[relatablepradeep]

@shivamkumar2003 i have assigned you the task