Fasih/DPROD-3471/Removed lazy loading attribute from fast payment sec…

…tion logos (#7018) * fix: removed lazy loading for fast payment section * fix: implement hook for payment section * fix: implement is in viewport condition on data as well * fix: revert hook implementation on data --------- Co-authored-by: fasihali-deriv <[email protected]>
binary-com · Feb 7, 2024 · 9858754 · 9858754
1 parent 449666d
commit 9858754
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 28 deletions.
diff --git a/src/components/hooks/use-is-in-viewport.tsx b/src/components/hooks/use-is-in-viewport.tsx
@@ -0,0 +1,20 @@
+import React, { MutableRefObject, useEffect, useMemo, useState, useRef } from 'react'
+
+function useIsInViewport(ref: MutableRefObject<HTMLDivElement>) {
+    const [isIntersecting, setIsIntersecting] = useState(false)
+    const observer = useRef<IntersectionObserver>()
+
+    useEffect(() => {
+        observer.current = new IntersectionObserver(([entry]) =>
+            setIsIntersecting(entry.isIntersecting),
+        )
+
+        observer.current.observe(ref.current)
+
+        return () => observer.current.disconnect()
+    }, [ref.current, observer.current])
+
+    return isIntersecting
+}
+
+export default useIsInViewport
diff --git a/src/features/pages/home/fast-payment/data.tsx b/src/features/pages/home/fast-payment/data.tsx
@@ -47,7 +47,7 @@ import { CardContent } from '@deriv-com/components'
 //     PaymentMethodMastercardBrandIcon,
 // } from '@deriv/quill-icons'
 
-const toImage = (path: string, loading: 'lazy' | 'eager' = 'lazy') => (
+const toImage = (path: string, loading: 'lazy' | 'eager' = 'eager') => (
     <img src={path} height={80} width={128} className="max-w-[128px] h-[80px]" loading={loading} />
 )
 

diff --git a/src/features/pages/home/fast-payment/index.tsx b/src/features/pages/home/fast-payment/index.tsx
@@ -1,37 +1,47 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import { FastPayment } from '@deriv-com/blocks'
 import { EUPaymentMethods, RowPaymentMethods } from './data'
 import useRegion from 'components/hooks/use-region'
 import { Localize } from 'components/localization'
-
+import useIsInViewport from 'components/hooks/use-is-in-viewport'
 const FastPaymentSection: React.FC = () => {
     const { is_eu } = useRegion()
+    const ref = useRef<HTMLDivElement>(null)
+    const is_in_viewport = useIsInViewport(ref)
+
+    const logosAnimation = is_in_viewport
+        ? is_eu
+            ? '!animate-[40s_slide_linear_infinite] rtl:!animate-[40s_slideRtl_linear_infinite]'
+            : '!animate-[100s_slide_linear_infinite] rtl:!animate-[100s_slideRtl_linear_infinite]'
+        : ''
     return (
-        <FastPayment
-            title={<Localize translate_text="_t_Fast, hassle-free deposits and withdrawals_t_" />}
-            description={
-                !is_eu ? (
-                    <Localize translate_text="_t_60+ global payment methods. Deposit instantly starting from just USD 5. Withdraw in minutes.*_t_" />
-                ) : (
-                    <Localize translate_text="_t_10+ global payment methods. Deposit instantly starting from just USD 10. Withdraw in minutes.*_t_" />
-                )
-            }
-            link={{
-                content: <Localize translate_text="_t_Learn more_t_" />,
-                href: '/payment-methods/',
-                descriptiveText: 'About payment methods',
-            }}
-            content={{
-                cols: 'infinite',
-                cards: is_eu ? EUPaymentMethods : RowPaymentMethods,
-                sliderClass: is_eu
-                    ? '!animate-[40s_slide_linear_infinite] rtl:!animate-[40s_slideRtl_linear_infinite]'
-                    : '!animate-[100s_slide_linear_infinite] rtl:!animate-[100s_slideRtl_linear_infinite]',
-            }}
-            disclaimer={
-                <Localize translate_text="_t_* Availability of payment methods and processing speeds may vary based on location and selected payment option._t_" />
-            }
-        />
+        <div ref={ref}>
+            <FastPayment
+                title={
+                    <Localize translate_text="_t_Fast, hassle-free deposits and withdrawals_t_" />
+                }
+                description={
+                    !is_eu ? (
+                        <Localize translate_text="_t_60+ global payment methods. Deposit instantly starting from just USD 5. Withdraw in minutes.*_t_" />
+                    ) : (
+                        <Localize translate_text="_t_10+ global payment methods. Deposit instantly starting from just USD 10. Withdraw in minutes.*_t_" />
+                    )
+                }
+                link={{
+                    content: <Localize translate_text="_t_Learn more_t_" />,
+                    href: '/payment-methods/',
+                    descriptiveText: 'About payment methods',
+                }}
+                content={{
+                    cols: 'infinite',
+                    cards: is_eu ? EUPaymentMethods : RowPaymentMethods,
+                    sliderClass: logosAnimation,
+                }}
+                disclaimer={
+                    <Localize translate_text="_t_* Availability of payment methods and processing speeds may vary based on location and selected payment option._t_" />
+                }
+            />
+        </div>
     )
 }