From 9858754f66b6e3725c24e727ba8b1738b558ce10 Mon Sep 17 00:00:00 2001
From: Habib Deriv <88178645+habib-deriv@users.noreply.github.com>
Date: Wed, 7 Feb 2024 12:37:33 +0800
Subject: [PATCH] Fasih/DPROD-3471/Removed lazy loading attribute from fast
 payment section 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 <muhammad.fasih@deriv.com>
---
 src/components/hooks/use-is-in-viewport.tsx   | 20 ++++++
 src/features/pages/home/fast-payment/data.tsx |  2 +-
 .../pages/home/fast-payment/index.tsx         | 64 +++++++++++--------
 3 files changed, 58 insertions(+), 28 deletions(-)
 create mode 100644 src/components/hooks/use-is-in-viewport.tsx

diff --git a/src/components/hooks/use-is-in-viewport.tsx b/src/components/hooks/use-is-in-viewport.tsx
new file mode 100644
index 00000000000..e4b336868d1
--- /dev/null
+++ 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
index 4f6dc0dadba..a81c59e4abd 100644
--- 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
index 53d60d41d5b..9eea1989436 100644
--- 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>
     )
 }