- Add mobile filter-button placeholder in skeleton when `isMobile` is true - Plumb `isMobile` from `PricingVendorIntroWithSkeleton` to `PricingVendorIntroSkeleton` - Rename skeleton key from 'button' to 'copy-button' for consistency - Neutralize copy-button skeleton color to match input (use neutral palette) - Keep “Total x models” tag inline with title on mobile; wrap only when space is insufficient - Mirror the same title+tag layout in the skeleton (flex-row flex-wrap items-center) - No linter errors introduced Affected files: - web/src/components/table/model-pricing/layout/header/PricingVendorIntro.jsx - web/src/components/table/model-pricing/layout/header/PricingVendorIntroSkeleton.jsx - web/src/components/table/model-pricing/layout/header/PricingVendorIntroWithSkeleton.jsx
51 lines
1.5 KiB
JavaScript
51 lines
1.5 KiB
JavaScript
/*
|
|
Copyright (C) 2025 QuantumNous
|
|
|
|
This program is free software: you can redistribute it and/or modify
|
|
it under the terms of the GNU Affero General Public License as
|
|
published by the Free Software Foundation, either version 3 of the
|
|
License, or (at your option) any later version.
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU Affero General Public License for more details.
|
|
|
|
You should have received a copy of the GNU Affero General Public License
|
|
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
|
|
For commercial licensing, please contact support@quantumnous.com
|
|
*/
|
|
|
|
import React, { memo } from 'react';
|
|
import PricingVendorIntro from './PricingVendorIntro';
|
|
import PricingVendorIntroSkeleton from './PricingVendorIntroSkeleton';
|
|
import { useMinimumLoadingTime } from '../../../../../hooks/common/useMinimumLoadingTime';
|
|
|
|
const PricingVendorIntroWithSkeleton = memo(({
|
|
loading = false,
|
|
filterVendor,
|
|
...restProps
|
|
}) => {
|
|
const showSkeleton = useMinimumLoadingTime(loading);
|
|
|
|
if (showSkeleton) {
|
|
return (
|
|
<PricingVendorIntroSkeleton
|
|
isAllVendors={filterVendor === 'all'}
|
|
isMobile={restProps.isMobile}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<PricingVendorIntro
|
|
filterVendor={filterVendor}
|
|
{...restProps}
|
|
/>
|
|
);
|
|
});
|
|
|
|
PricingVendorIntroWithSkeleton.displayName = 'PricingVendorIntroWithSkeleton';
|
|
|
|
export default PricingVendorIntroWithSkeleton; |