[Feature]: Variants panel on configurable product edit: paginated loading + option-based filtering

Summary

The variants panel on the configurable product edit page currently loads all variants eagerly at page render time via @json($product->variants()->...->get()). For products with large variant counts (e.g. 100+), this bloats the page payload, makes the initial load slow, and makes the list hard to navigate.

This issue proposes two related UX improvements:

1. Limit the initial list to 10 variants per page (currently hard-coded but only applied via client-side slice — the full collection is still hydrated server-side)
2. Add option-based filtering to let users narrow down the visible variants by attribute value (e.g. filter by color = Gold or size = 7) when a configurable product has super attributes defined

Current behaviour

In packages/Webkul/Admin/src/Resources/views/catalog/products/edit/types/configurable.blade.php, the Vue component is seeded with the full variant collection:

variants: @json($product->variants()->with(['attribute_family'])->get()->map(fn ($item) => $item->normalizeWithImage())),

Client-side pagination is then applied via a computed property (paginatedVariants) that slices this full array. This means all variants are serialised into the page HTML regardless of count — the pagination is purely cosmetic.

superAttributes is already available in the component (used to drive the "Add Variant" modal), so the option values needed for filtering are already present.

Proposed behaviour

1. True server-side pagination (or lazy loading)

Rather than hydrating the entire variants collection into the blade template, load only the first page (10 records) on initial render, and fetch subsequent pages via an API call as the user navigates. This keeps the page payload constant regardless of variant count.

Alternatively — as a simpler first step — if full server-side pagination is out of scope, at minimum the PHP query should add a limit so the initial payload is bounded (e.g. first 10), with subsequent pages fetched via XHR.

2. Option-based variant filtering

When the configurable product has one or more super attributes (e.g. color, size), display a filter row above the variants list with a dropdown per attribute. Selecting an option narrows the visible variants to those matching that combination.

superAttributes with their options are already available in the Vue component's data(), so the filter state can be held as a selectedFilters object ({ color: null, size: null }) and applied as a computed filter before pagination.

Example behaviour:

• Product has color (Gold, Silver, Rose Gold) and size (6, 7, 8)
• User selects color = Gold → list narrows to Gold variants across all sizes
• User then selects size = 7 → list narrows further to Gold / Size 7 only
• Clearing a filter restores the full (paginated) list
• Filter controls only render when superAttributes.length > 0

Motivation

Configurable products with large variant counts (e.g. 50–200+ variants across multiple attribute combinations) make the current panel unwieldy. The full collection is serialised into the page regardless, and without filtering there's no practical way to locate a specific variant. These two changes make the panel usable at realistic catalogue sizes without a full architectural change.

Affected file

packages/Webkul/Admin/src/Resources/views/catalog/products/edit/types/configurable.blade.php

Additional context

A community patch exists that adds client-side pagination (10 per page) and attribute label/option translation fallbacks, which can serve as a reference for the pagination UI (Prev/Next buttons, "X–Y of Z" counter). The filtering feature is additive on top of that.