From af272a368b37e5adc7772fb3df7c3b45892f2477 Mon Sep 17 00:00:00 2001
From: Chintan Sudani <46838508+csudani7@users.noreply.github.com>
Date: Mon, 30 Jan 2023 18:32:05 +0530
Subject: [PATCH] fix: added lazy loading on dashboard (#2133)

* fix: Removed Strict mode to stop render twice

* fix: added lazy loading on dashboard

* fix: suggested changes

* fix: added react-intersection-observer changes

* fix: resolved multiple time api call issue

* chore: variable name is updated

---------

Co-authored-by: Palash Gupta <palashgdev@gmail.com>
---
 frontend/package.json                              |  1 +
 .../src/container/GridGraphLayout/Graph/index.tsx  | 14 +++++++++++---
 frontend/yarn.lock                                 |  5 +++++
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 7d5784af7a..bd06d4893f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -76,6 +76,7 @@
 		"react-graph-vis": "^1.0.5",
 		"react-grid-layout": "^1.3.4",
 		"react-i18next": "^11.16.1",
+		"react-intersection-observer": "9.4.1",
 		"react-query": "^3.34.19",
 		"react-redux": "^7.2.2",
 		"react-router-dom": "^5.2.0",
diff --git a/frontend/src/container/GridGraphLayout/Graph/index.tsx b/frontend/src/container/GridGraphLayout/Graph/index.tsx
index a47fc6b53d..011af4e46d 100644
--- a/frontend/src/container/GridGraphLayout/Graph/index.tsx
+++ b/frontend/src/container/GridGraphLayout/Graph/index.tsx
@@ -8,6 +8,7 @@ import getChartData from 'lib/getChartData';
 import isEmpty from 'lodash-es/isEmpty';
 import React, { memo, useCallback, useMemo, useState } from 'react';
 import { Layout } from 'react-grid-layout';
+import { useInView } from 'react-intersection-observer';
 import { useQuery } from 'react-query';
 import { connect, useSelector } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
@@ -39,6 +40,11 @@ function GridCardGraph({
 	setLayout,
 	onDragSelect,
 }: GridCardGraphProps): JSX.Element {
+	const { ref: graphRef, inView: isGraphVisible } = useInView({
+		threshold: 0,
+		triggerOnce: true,
+	});
+
 	const [errorMessage, setErrorMessage] = useState<string | undefined>('');
 	const [hovered, setHovered] = useState(false);
 	const [modal, setModal] = useState(false);
@@ -79,6 +85,7 @@ function GridCardGraph({
 			}),
 		{
 			keepPreviousData: true,
+			enabled: isGraphVisible,
 			refetchOnMount: false,
 			onError: (error) => {
 				if (error instanceof Error) {
@@ -160,7 +167,7 @@ function GridCardGraph({
 
 	if (queryResponse.isError && !isEmptyLayout) {
 		return (
-			<span>
+			<span ref={graphRef}>
 				{getModals()}
 				{!isEmpty(widget) && prevChartDataSetRef && (
 					<>
@@ -192,7 +199,7 @@ function GridCardGraph({
 
 	if (prevChartDataSetRef?.labels === undefined && queryResponse.isLoading) {
 		return (
-			<span>
+			<span ref={graphRef}>
 				{!isEmpty(widget) && prevChartDataSetRef?.labels ? (
 					<>
 						<div className="drag-handle">
@@ -225,6 +232,7 @@ function GridCardGraph({
 
 	return (
 		<span
+			ref={graphRef}
 			onMouseOver={(): void => {
 				setHovered(true);
 			}}
@@ -260,7 +268,7 @@ function GridCardGraph({
 					data={chartData}
 					isStacked={widget.isStacked}
 					opacity={widget.opacity}
-					title={' '} // empty title to accommodate absolutely positioned widget header
+					title={' '} // `empty title to accommodate absolutely positioned widget header
 					name={name}
 					yAxisUnit={yAxisUnit}
 					onDragSelect={onDragSelect}
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 079f789676..7f06bd9c40 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -11104,6 +11104,11 @@ react-i18next@^11.16.1:
     "@babel/runtime" "^7.14.5"
     html-parse-stringify "^3.0.1"
 
+react-intersection-observer@9.4.1:
+  version "9.4.1"
+  resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-9.4.1.tgz#4ccb21e16acd0b9cf5b28d275af7055bef878f6b"
+  integrity sha512-IXpIsPe6BleFOEHKzKh5UjwRUaz/JYS0lT/HPsupWEQou2hDqjhLMStc5zyE3eQVT4Fk3FufM8Fw33qW1uyeiw==
+
 react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"