From 341110e6ef79130472e9eda95e655319b06fc659 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 4 Aug 2022 15:12:33 +0700
Subject: [PATCH] added throttle for LoginScene

---
 .../auth/login/LoginScene/index.tsx           | 25 ++++++++++---------
 .../auth/login/LoginScene/styles.module.scss  |  2 +-
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/components/auth/login/LoginScene/index.tsx b/src/components/auth/login/LoginScene/index.tsx
index dc52db08..49fe29da 100644
--- a/src/components/auth/login/LoginScene/index.tsx
+++ b/src/components/auth/login/LoginScene/index.tsx
@@ -1,11 +1,6 @@
-import React, {
-  FC,
-  memo,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import { FC, memo, useCallback, useEffect, useRef, useState } from "react";
+
+import { debounce, throttle } from "throttle-debounce";
 
 import { useWindowSize } from "~/hooks/dom/useWindowSize";
 
@@ -58,6 +53,7 @@ const LoginScene: FC<LoginSceneProps> = memo(() => {
   const [loaded, setLoaded] = useState(false);
   const imageRefs = useRef<Array<SVGImageElement | null>>([]);
   const { isMobile } = useWindowSize();
+  const domRect = useRef<DOMRect>();
 
   const onMouseMove = useCallback(
     (event: MouseEvent): any => {
@@ -65,7 +61,11 @@ const LoginScene: FC<LoginSceneProps> = memo(() => {
         return;
       }
 
-      const { x, width } = containerRef.current.getBoundingClientRect();
+      if (!domRect.current) {
+        domRect.current = containerRef.current.getBoundingClientRect();
+      }
+
+      const { x, width } = domRect.current!;
       const middle = (width - x) / 2;
       const shift = event.pageX / middle / 2 - 0.5;
 
@@ -83,8 +83,9 @@ const LoginScene: FC<LoginSceneProps> = memo(() => {
   );
 
   useEffect(() => {
-    document.addEventListener("mousemove", onMouseMove);
-    return () => document.removeEventListener("mousemove", onMouseMove);
+    const listener = throttle(100, onMouseMove);
+    document.addEventListener("mousemove", listener);
+    return () => document.removeEventListener("mousemove", listener);
   }, []);
 
   if (isMobile) {
@@ -123,7 +124,7 @@ const LoginScene: FC<LoginSceneProps> = memo(() => {
           fill="url(#fallbackGradient)"
         />
 
-        {layers.map((it, index) => (
+        {layers.map(it => (
           <image
             ref={it => imageRefs.current.push(it)}
             key={it.src}
diff --git a/src/components/auth/login/LoginScene/styles.module.scss b/src/components/auth/login/LoginScene/styles.module.scss
index eacda5ab..fa959856 100644
--- a/src/components/auth/login/LoginScene/styles.module.scss
+++ b/src/components/auth/login/LoginScene/styles.module.scss
@@ -9,7 +9,7 @@
 }
 
 .image {
-  transition: opacity 1s;
+  transition: opacity 1s, transform 0.1s;
   will-change: opacity, transform;
 
   @include tablet {