feat(ui): add reusable Skeleton loading component

[Peeyush2006]

Adds a lightweight, reusable Skeleton placeholder for loading states in
data-heavy views (inventory tables, price cards, charts). Reduces layout
shift and improves perceived performance during data fetches.

• Built with TypeScript + CSS Modules (no Tailwind), matching project conventions
• Supports text / rect / circle variants and flexible sizing
• Theme-aware (light/dark) and accessible: aria-hidden, honors prefers-reduced-motion

Note: dark-mode selector currently assumes [data-theme="dark"] — happy to
adjust to match the project's theming approach.

[github-actions]

📝 Summary

The provided pull request introduces a new Skeleton component, which is a lightweight, theme-aware loading placeholder. It includes a CSS module for styling and a TypeScript file for the component's logic. The component is designed to reduce layout shift and improve perceived performance in data-heavy views.

📂 Files Changed

• app/components/Skeleton/Skeleton.module.css: A new CSS module file for styling the Skeleton component.
• app/components/Skeleton/Skeleton.tsx: A new TypeScript file for the Skeleton component's logic.

🎭 Code Poem

Code so fine, with styles divine,
Skeleton component, truly sublime.
Loading placeholders, with ease and care,
Improving performance, with flair.

🚨 Bugs & Architectural Violations

* The `Skeleton` component is placed in the `app/components/` directory, which violates the rule of placing UI components in the `app/blocks/` directory. It should be moved to `app/blocks/__global/` or a similar directory. * The code does not seem to have any other critical architectural violations or bugs.

💡 Suggestions & Best Practices

* Consider adding a `defer` function to the component's loader to improve performance. * The `aria-hidden` attribute is correctly used to keep the component out of the accessibility tree. * The component's styles are well-organized, and the use of CSS variables for theming is a good practice. * The code is well-documented, and the example usage is helpful. * Consider adding more test cases to ensure the component works as expected in different scenarios.

[Peeyush2006]

Hi! Thanks for maintaining FlipTrack 🙌

This PR adds a small, reusable Skeleton loading component for data-heavy
views. It's additive (no existing files changed), theme-aware, and
accessible (honors prefers-reduced-motion).

One thing to confirm — I assumed dark mode uses [data-theme="dark"].
If the project toggles theme differently, let me know and I'll update
the selector. Happy to make any changes you'd like!