[project-base] removed initial tab animation on product detail page (…

…#3579)
shopsys · Nov 11, 2024 · c1476ec · c1476ec
2 parents 7566fd6 + d879ecc
commit c1476ec
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 41 deletions.
diff --git a/storefront/components/Basic/Tabs/Tabs.tsx b/storefront/components/Basic/Tabs/Tabs.tsx
@@ -23,6 +23,7 @@ import { useMediaMin } from 'utils/ui/useMediaMin';
 type TabsContentProps = {
     headingTextMobile: string;
     isActive: boolean;
+    skipInitialAnimation?: boolean;
 };
 
 type TabFC<T = unknown> = FC<T> & { tabsRole: string };
@@ -58,6 +59,7 @@ export const TabsContent: TabFC<TabsContentProps & Partial<PropsWithRef<TabPanel
     children,
     headingTextMobile,
     isActive,
+    skipInitialAnimation = false,
     ...props
 }) => {
     const [isActiveOnMobile, setIsActiveOnMobile] = useState<boolean | undefined>(false);
@@ -85,6 +87,7 @@ export const TabsContent: TabFC<TabsContentProps & Partial<PropsWithRef<TabPanel
                 {(isActiveOnMobile || (isActive && isLg)) && (
                     <AnimateCollapseDiv
                         className="relative !block w-full"
+                        initial={skipInitialAnimation ? 'open' : 'closed'}
                         keyName={`tabs-content-${headingTextMobile}`}
                     >
                         {children}

diff --git a/storefront/components/Blocks/Product/ProductsList/ProductListItemPlaceholder.tsx b/storefront/components/Blocks/Product/ProductsList/ProductListItemPlaceholder.tsx
@@ -23,13 +23,14 @@ export const ProductListItemPlaceholder: FC<ProductListItemPlaceholderProps> = (
     return (
         <li
             className={twMergeCustom(
-                'group relative flex select-none flex-col justify-between gap-2.5 rounded-xl border border-backgroundMore bg-backgroundMore px-2.5 py-5 text-left transition sm:px-5',
+                'group relative flex select-none flex-col gap-2.5 rounded-xl border border-backgroundMore bg-backgroundMore px-2.5 py-5 text-left transition sm:px-5',
+                size === 'small' && 'p-5',
                 'hover:border-borderAccentLess hover:bg-background',
                 className,
             )}
         >
             <ExtendedNextLink
-                className="flex h-full select-none flex-col justify-between gap-2.5 text-text no-underline hover:text-link hover:no-underline"
+                className="flex select-none flex-col gap-2.5 text-text no-underline hover:text-link hover:no-underline"
                 draggable={false}
                 href={product.slug}
                 type={product.isMainVariant ? 'productMainVariant' : 'product'}
@@ -40,32 +41,33 @@ export const ProductListItemPlaceholder: FC<ProductListItemPlaceholderProps> = (
                     {product.fullName}
                 </div>
 
-                <div>
-                    <div className="min-h-6 sm:min-h-7">
-                        {visibleItemsConfig.price && !(product.isMainVariant && product.isSellingDenied) && (
-                            <ProductPrice productPrice={product.price} />
-                        )}
-                    </div>
+                <div className="min-h-6 sm:min-h-7">
+                    {visibleItemsConfig.price && !(product.isMainVariant && product.isSellingDenied) && (
+                        <ProductPrice
+                            isPriceFromVisible={visibleItemsConfig.priceFromWord}
+                            productPrice={product.price}
+                        />
+                    )}
+                </div>
 
-                    <div className="min-h-10 xs:min-h-[60px] sm:min-h-10">
-                        {visibleItemsConfig.storeAvailability && !product.isInquiryType && (
-                            <ProductAvailableStoresCount
-                                availableStoresCount={product.availableStoresCount}
-                                isMainVariant={product.isMainVariant}
-                                name={product.availability.name}
-                            />
-                        )}
-                    </div>
+                <div className="min-h-10 xs:min-h-[60px] sm:min-h-10">
+                    {visibleItemsConfig.storeAvailability && !product.isInquiryType && (
+                        <ProductAvailableStoresCount
+                            availableStoresCount={product.availableStoresCount}
+                            isMainVariant={product.isMainVariant}
+                            name={product.availability.name}
+                        />
+                    )}
                 </div>
             </ExtendedNextLink>
 
             <div className="flex w-full items-center justify-between gap-1 sm:justify-normal sm:gap-2.5">
-                {visibleItemsConfig.addToCart && <Skeleton className="h-10" containerClassName="w-1/2" />}
+                {visibleItemsConfig.addToCart && <Skeleton className="h-9" containerClassName="w-1/2" />}
 
                 {visibleItemsConfig.productListButtons && (
                     <>
-                        <Skeleton className="h-8 w-8" />
-                        <Skeleton className="h-8 w-8" />
+                        <Skeleton className="size-6" />
+                        <Skeleton className="size-6" />
                     </>
                 )}
             </div>

diff --git a/storefront/components/Blocks/Product/ProductsSliderPlaceholder.tsx b/storefront/components/Blocks/Product/ProductsSliderPlaceholder.tsx
@@ -4,7 +4,7 @@ import { ProductListItemPlaceholder } from './ProductsList/ProductListItemPlaceh
 import { ProductsSliderProps, VISIBLE_SLIDER_ITEMS } from './ProductsSlider';
 import { ExtendedNextLink } from 'components/Basic/ExtendedNextLink/ExtendedNextLink';
 import { ArrowSecondaryIcon } from 'components/Basic/Icon/ArrowSecondaryIcon';
-import useTranslation from 'next-translate/useTranslation';
+import { twJoin } from 'tailwind-merge';
 
 type ProductsSliderPlaceholderProps = {
     size?: ProductItemProps['size'];
@@ -16,28 +16,21 @@ export const ProductsSliderPlaceholder: FC<ProductsSliderPlaceholderProps> = ({
     visibleItemsConfig,
     size,
 }) => {
-    const { t } = useTranslation();
-
     return (
         <div className="relative">
             {products.length > VISIBLE_SLIDER_ITEMS && (
-                <div className="absolute -top-11 right-0 hidden items-center justify-center vl:flex ">
-                    <button
-                        className="ml-1 h-8 w-8 cursor-pointer rounded border-none pt-1 outline-none transition"
-                        title={t('Previous products')}
-                    >
-                        <ArrowSecondaryIcon className="w-5 -translate-y-[2px] rotate-90 text-text hover:text-textAccent disabled:text-textDisabled" />
-                    </button>
-                    <button
-                        className="ml-1 h-8 w-8 cursor-pointer rounded border-none pt-1 outline-none transition"
-                        title={t('Next products')}
-                    >
-                        <ArrowSecondaryIcon className="w-5 -translate-y-[2px] -rotate-90 text-text hover:text-textAccent disabled:text-textDisabled" />
-                    </button>
+                <div className="absolute -top-10 right-0 hidden items-center justify-center gap-2 vl:flex">
+                    <SliderButtonPlaceholder type="prev" />
+                    <SliderButtonPlaceholder type="next" />
                 </div>
             )}
 
-            <ul className="grid snap-x snap-mandatory auto-cols-[80%] grid-flow-col overflow-x-auto overscroll-x-contain [-ms-overflow-style:'none'] [scrollbar-width:'none'] md:auto-cols-[45%] lg:auto-cols-[30%] vl:auto-cols-[25%] [&::-webkit-scrollbar]:hidden">
+            <ul
+                className={twJoin(
+                    "grid snap-x snap-mandatory grid-flow-col overflow-x-auto overscroll-x-contain [-ms-overflow-style:'none'] [scrollbar-width:'none'] [&::-webkit-scrollbar]:hidden",
+                    'auto-cols-[225px] sm:auto-cols-[60%]  md:auto-cols-[45%] lg:auto-cols-[30%] vl:auto-cols-[25%] xl:auto-cols-[20%]',
+                )}
+            >
                 {products.map((product, index) =>
                     index < VISIBLE_SLIDER_ITEMS ? (
                         <ProductListItemPlaceholder
@@ -58,3 +51,11 @@ export const ProductsSliderPlaceholder: FC<ProductsSliderPlaceholderProps> = ({
         </div>
     );
 };
+
+type SliderButtonPlaceholderProps = { type: 'prev' | 'next' };
+
+const SliderButtonPlaceholder: FC<SliderButtonPlaceholderProps> = ({ type }) => (
+    <button className="cursor-pointer rounded border-none p-1 text-text outline-none transition hover:text-textAccent disabled:cursor-auto disabled:text-textDisabled">
+        <ArrowSecondaryIcon className={twJoin('w-5', type === 'prev' ? 'rotate-90' : '-rotate-90')} />
+    </button>
+);
diff --git a/storefront/components/Blocks/Skeleton/SkeletonModuleComparisonAndWishlistButtons.tsx b/storefront/components/Blocks/Skeleton/SkeletonModuleComparisonAndWishlistButtons.tsx
@@ -1,3 +1,5 @@
 import Skeleton from 'react-loading-skeleton';
 
-export const SkeletonModuleComparisonAndWishlistButtons: FC = () => <Skeleton className="h-28 lg:h-9" />;
+export const SkeletonModuleComparisonAndWishlistButtons: FC = () => (
+    <Skeleton className="h-full w-full" containerClassName="h-28 lg:h-6" />
+);
diff --git a/storefront/components/Blocks/Skeleton/SkeletonModuleProductDetailAddToCart.tsx b/storefront/components/Blocks/Skeleton/SkeletonModuleProductDetailAddToCart.tsx
@@ -1,5 +1,5 @@
 import Skeleton from 'react-loading-skeleton';
 
 export const SkeletonModuleProductDetailAddToCart: FC = () => (
-    <Skeleton className="h-12" containerClassName="w-full h-12" />
+    <Skeleton className="h-[52px]" containerClassName="w-full h-[52px]" />
 );
diff --git a/storefront/components/Pages/ProductDetail/ProductDetailContent.tsx b/storefront/components/Pages/ProductDetail/ProductDetailContent.tsx
@@ -96,12 +96,14 @@ export const ProductDetailContent: FC<ProductDetailContentProps> = ({ product, i
                         </div>
                     </div>
                 </div>
+
                 <ProductDetailTabs
                     description={product.description}
                     files={product.files}
                     parameters={product.parameters}
                     relatedProducts={product.relatedProducts}
                 />
+
                 {isLuigisBoxActive && (
                     <DeferredRecommendedProducts
                         itemUuids={[product.uuid]}
@@ -114,6 +116,7 @@ export const ProductDetailContent: FC<ProductDetailContentProps> = ({ product, i
                         )}
                     />
                 )}
+
                 <DeferredProductDetailAccessories accessories={product.accessories} />
             </Webline>
         </>

diff --git a/storefront/components/Pages/ProductDetail/ProductDetailTabs/ProductDetailTabs.tsx b/storefront/components/Pages/ProductDetail/ProductDetailTabs/ProductDetailTabs.tsx
@@ -25,6 +25,7 @@ export type ProductDetailTabsProps = {
 export const ProductDetailTabs: FC<ProductDetailTabsProps> = ({ description, parameters, relatedProducts, files }) => {
     const { t } = useTranslation();
     const [selectedTab, setSelectedTab] = useState(0);
+    const [skipInitialAnimation, setSkipInitialAnimation] = useState(true);
 
     const formatParameterValue = (valueText: string, index: number) => {
         return index > 0 ? ' | ' + valueText : valueText;
@@ -56,7 +57,10 @@ export const ProductDetailTabs: FC<ProductDetailTabsProps> = ({ description, par
         <Tabs
             className="flex flex-col gap-4 lg:gap-0"
             selectedIndex={selectedTab}
-            onSelect={(index) => setSelectedTab(index)}
+            onSelect={(index) => {
+                setSkipInitialAnimation(false);
+                setSelectedTab(index);
+            }}
         >
             <TabsList>
                 <TabsListItem>{t('Overview')}</TabsListItem>
@@ -68,7 +72,11 @@ export const ProductDetailTabs: FC<ProductDetailTabsProps> = ({ description, par
                 {!!files.length && <TabsListItem>{t('Files')}</TabsListItem>}
             </TabsList>
 
-            <TabsContent headingTextMobile={t('Overview')} isActive={selectedTab === 0}>
+            <TabsContent
+                headingTextMobile={t('Overview')}
+                isActive={selectedTab === 0}
+                skipInitialAnimation={skipInitialAnimation}
+            >
                 {description && <UserText htmlContent={description} />}
             </TabsContent>