Loading Skeleton Component

Problem/Feature Description

The product listing page fetches data asynchronously, and while the API response is in flight the page currently shows a blank white area. Users in user-research sessions rated this experience as confusing — they weren't sure if the page had loaded. The design team wants to replace the blank state with a loading skeleton: a set of placeholder shapes that animate with a subtle shimmer or pulse to signal that content is coming.

The skeleton should mimic the rough shape of a product card — a rectangular image area, a title line, and two shorter body-text lines beneath it. The animation should be a horizontal gradient shimmer that sweeps left to right repeatedly, or alternatively a gentle opacity pulse. No third-party skeleton libraries should be used; the component should be built from scratch with the project's standard tooling.

Output Specification

Produce a ProductCardSkeleton.styles.js file containing the animated styled components. Produce a ProductCardSkeleton.component.js that assembles them into the skeleton layout. Both files should be complete JavaScript source. Do not produce compiled bundles or assets larger than a few kilobytes.