feat(loader): Created the loader component

[OluwafisayoIbrahim]

PR Title:

feat: created a loader component

Description:

This PR introduces a reusable Loader component designed for our Next.js project. The Loader is built using React with TypeScript and styled using Tailwind CSS. It provides a customizable spinner that can be used as a full-screen overlay or inline, depending on the use case.

Changes Included:

• Loader Component:
• Accepts three props: fullscreen (boolean, defaults to true): Determines if the loader covers the entire viewport or just a section, message (string, defaults to "Loading, Please wait..."): Displays a customizable loading message, className (string): Allows additional Tailwind classes for further customization.

Usage Examples:

• Full-screen usage for page-level data loading.
• Inline usage for section-specific loading states.

Testing:

• Verified that the Loader overlays the entire screen when fullscreen is true.
• Confirmed that the loader appears only in a designated container when fullscreen is set to false (with additional positioning classes).
• Checked that the loading message is customizable via the message prop.
• Confirmed that the component integrates seamlessly within our existing Next.js pages.

Screenshots:

Note:

The component uses inline <style jsx> for the spinner animation keyframes, ensuring compatibility without requiring modifications to the Tailwind config.

Please review and provide feedback. Thanks!