Merge pull request #1140 from searchspring/develop

Release 0.59.0
searchspring · Aug 22, 2024 · aa98758 · aa98758
2 parents d46572d + 299c7c8
commit aa98758
Show file tree

Hide file tree

Showing 19 changed files with 628 additions and 247 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -8,7 +8,7 @@ module.exports = {
 		'plugin:@typescript-eslint/recommended', // uses the recommended rules from the @typescript-eslint/eslint-plugin
 		'prettier', // disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
 	],
-	ignorePatterns: ["**/docs", "**/dist", "*.test.ts", "*.test.tsx"],
+	ignorePatterns: ["**/docs", "**/dist", "*.test.ts", "*.test.tsx", "./packages/snapps"],
 	rules: {
 		// add rules... or dont...
 		'no-debugger': 'error',

diff --git a/...snap-preact-components/src/components/Organisms/Recommendation/Recommendation.stories.tsx b/...snap-preact-components/src/components/Organisms/Recommendation/Recommendation.stories.tsx
@@ -138,6 +138,20 @@ export default {
 			},
 			control: { type: 'text' },
 		},
+		lazyRender: {
+			description: 'Lazy render settings object',
+			defaultValue: {
+				enabled: true,
+				offset: '10%',
+			},
+			table: {
+				type: {
+					summary: 'object',
+				},
+				defaultValue: { summary: 'Lazy render settings object' },
+			},
+			control: { type: 'object' },
+		},
 		breakpoints: {
 			defaultValue: undefined,
 			description: 'Recommendation title',

diff --git a/packages/snap-preact-components/src/components/Organisms/Recommendation/Recommendation.tsx b/packages/snap-preact-components/src/components/Organisms/Recommendation/Recommendation.tsx
@@ -4,13 +4,14 @@ import { jsx, css } from '@emotion/react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react';
 import deepmerge from 'deepmerge';
-
+import { useState, useRef } from 'preact/hooks';
 import type { RecommendationController } from '@searchspring/snap-controller';
 import type { Product } from '@searchspring/snap-store-mobx';
 
 import { Carousel, CarouselProps, defaultCarouselBreakpoints, defaultVerticalCarouselBreakpoints } from '../../Molecules/Carousel';
 import { Result, ResultProps } from '../../Molecules/Result';
 import { defined } from '../../../utilities';
+import { useIntersection } from '../../../hooks';
 import { Theme, useTheme, CacheProvider } from '../../../providers';
 import { ComponentProps, BreakpointsProps, StylingCSS } from '../../../types';
 import { useDisplaySettings } from '../../../hooks/useDisplaySettings';
@@ -68,10 +69,17 @@ export const Recommendation = observer((properties: RecommendationProps): JSX.El
 		disableStyles,
 		style,
 		className,
+		lazyRender,
 		vertical,
 		...additionalProps
 	} = props;
 
+	const mergedlazyRender = {
+		enabled: true,
+		offset: '10%',
+		...lazyRender,
+	};
+
 	if (!controller || controller.type !== 'recommendation') {
 		throw new Error(`<Recommendation> Component requires 'controller' prop with an instance of RecommendationController`);
 	}
@@ -120,35 +128,59 @@ export const Recommendation = observer((properties: RecommendationProps): JSX.El
 		styling.css = [style];
 	}
 
+	const [isVisible, setIsVisible] = useState(false);
+
+	const recsRef = useRef(null);
+	const inView = mergedlazyRender?.enabled ? useIntersection(recsRef, `${mergedlazyRender.offset} 0px ${mergedlazyRender.offset} 0px`, true) : true;
+	if (inView) {
+		setIsVisible(true);
+	}
+
 	return children || resultsToRender?.length ? (
 		<CacheProvider>
-			<div {...styling} className={classnames('ss__recommendation', className)}>
-				<RecommendationProfileTracker controller={controller}>
-					{title && <h3 className="ss__recommendation__title">{title}</h3>}
-					<Carousel
-						prevButton={prevButton}
-						nextButton={nextButton}
-						hideButtons={hideButtons}
-						loop={loop}
-						pagination={pagination}
-						breakpoints={breakpoints}
-						{...subProps.carousel}
-						{...additionalProps}
-						{...displaySettings}
-					>
+			<div {...styling} className={classnames('ss__recommendation', className)} ref={recsRef}>
+				{isVisible ? (
+					<RecommendationProfileTracker controller={controller}>
+						{title && <h3 className="ss__recommendation__title">{title}</h3>}
+						<Carousel
+							prevButton={prevButton}
+							nextButton={nextButton}
+							hideButtons={hideButtons}
+							loop={loop}
+							pagination={pagination}
+							breakpoints={breakpoints}
+							{...subProps.carousel}
+							{...additionalProps}
+							{...displaySettings}
+						>
+							{Array.isArray(children) && children.length
+								? children.map((child: any, idx: number) => (
+										<RecommendationResultTracker controller={controller} result={resultsToRender[idx]}>
+											{child}
+										</RecommendationResultTracker>
+								  ))
+								: resultsToRender.map((result) => (
+										<RecommendationResultTracker controller={controller} result={result}>
+											<Result {...subProps.result} controller={controller} result={result} />
+										</RecommendationResultTracker>
+								  ))}
+						</Carousel>
+					</RecommendationProfileTracker>
+				) : (
+					<RecommendationProfileTracker controller={controller}>
 						{Array.isArray(children) && children.length
 							? children.map((child: any, idx: number) => (
 									<RecommendationResultTracker controller={controller} result={resultsToRender[idx]}>
-										{child}
+										<></>
 									</RecommendationResultTracker>
 							  ))
 							: resultsToRender.map((result) => (
 									<RecommendationResultTracker controller={controller} result={result}>
-										<Result {...subProps.result} controller={controller} result={result} />
+										<></>
 									</RecommendationResultTracker>
 							  ))}
-					</Carousel>
-				</RecommendationProfileTracker>
+					</RecommendationProfileTracker>
+				)}
 			</div>
 		</CacheProvider>
 	) : (
@@ -168,6 +200,10 @@ export interface RecommendationProps extends ComponentProps {
 	controller: RecommendationController;
 	children?: ComponentChildren;
 	vertical?: boolean;
+	lazyRender?: {
+		enabled: boolean;
+		offset?: string;
+	};
 }
 
 interface RecommendationSubProps {

diff --git a/packages/snap-preact-components/src/components/Organisms/Recommendation/readme.md b/packages/snap-preact-components/src/components/Organisms/Recommendation/readme.md
@@ -88,6 +88,18 @@ import { Scrollbar } from 'swiper';
 <Recommendation controller={controller} modules={[Scrollbar]} scrollbar={{ draggable: true }} />
 ```
 
+### lazyRender 
+The `lazyRender` prop specifies an object of lazy rendering settings. The settings include an `enable` toggle (defaults to `true`) as well as an `offset` (default `"10%"`) to specify at what distance the component should start rendering relative to the bottom of the viewport.
+
+```jsx
+const customLazyRenderProps = {
+	enabled: true,
+	offset: "20px" // any css margin values accepted - px, %, etc...
+}
+
+<Recommendation controller={controller} lazyRender={ customLazyRenderProps } />
+```
+
 ### breakpoints
 An object that modifies the responsive behavior of the carousel at various viewports. 
 

diff --git a/...components/src/components/Organisms/RecommendationBundle/RecommendationBundle.stories.tsx b/...components/src/components/Organisms/RecommendationBundle/RecommendationBundle.stories.tsx
@@ -247,6 +247,20 @@ export default {
 				},
 			},
 		},
+		lazyRender: {
+			description: 'Lazy render settings object',
+			defaultValue: {
+				enabled: true,
+				offset: '10%',
+			},
+			table: {
+				type: {
+					summary: 'object',
+				},
+				defaultValue: { summary: 'Lazy render settings object' },
+			},
+			control: { type: 'object' },
+		},
 		breakpoints: {
 			defaultValue: undefined,
 			description: 'Recommendation title',