GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 16:58:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: added lazy loading on dashboard (#2133)

Browse Source 
* 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>
This commit is contained in:
Chintan Sudani 2023-01-30 18:32:05 +05:30 committed by GitHub
parent b336a6cb45
commit af272a368b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/package.json
View File

@ -76,6 +76,7 @@
"react-graph-vis": "^1.0.5", "react-graph-vis": "^1.0.5",
"react-grid-layout": "^1.3.4", "react-grid-layout": "^1.3.4",
"react-i18next": "^11.16.1", "react-i18next": "^11.16.1",
"react-intersection-observer": "9.4.1",
"react-query": "^3.34.19", "react-query": "^3.34.19",
"react-redux": "^7.2.2", "react-redux": "^7.2.2",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",

14
frontend/src/container/GridGraphLayout/Graph/index.tsx
View File

@ -8,6 +8,7 @@ import getChartData from 'lib/getChartData';
import isEmpty from 'lodash-es/isEmpty'; import isEmpty from 'lodash-es/isEmpty';
import React, { memo, useCallback, useMemo, useState } from 'react'; import React, { memo, useCallback, useMemo, useState } from 'react';
import { Layout } from 'react-grid-layout'; import { Layout } from 'react-grid-layout';
import { useInView } from 'react-intersection-observer';
import { useQuery } from 'react-query'; import { useQuery } from 'react-query';
import { connect, useSelector } from 'react-redux'; import { connect, useSelector } from 'react-redux';
import { bindActionCreators, Dispatch } from 'redux'; import { bindActionCreators, Dispatch } from 'redux';
@ -39,6 +40,11 @@ function GridCardGraph({
setLayout, setLayout,
onDragSelect, onDragSelect,
}: GridCardGraphProps): JSX.Element { }: GridCardGraphProps): JSX.Element {
const { ref: graphRef, inView: isGraphVisible } = useInView({
threshold: 0,
triggerOnce: true,
});
const [errorMessage, setErrorMessage] = useState<string | undefined>(''); const [errorMessage, setErrorMessage] = useState<string | undefined>('');
const [hovered, setHovered] = useState(false); const [hovered, setHovered] = useState(false);
const [modal, setModal] = useState(false); const [modal, setModal] = useState(false);
@ -79,6 +85,7 @@ function GridCardGraph({
}), }),
{ {
keepPreviousData: true, keepPreviousData: true,
enabled: isGraphVisible,
refetchOnMount: false, refetchOnMount: false,
onError: (error) => { onError: (error) => {
if (error instanceof Error) { if (error instanceof Error) {
@ -160,7 +167,7 @@ function GridCardGraph({
if (queryResponse.isError && !isEmptyLayout) { if (queryResponse.isError && !isEmptyLayout) {
return ( return (
<span> <span ref={graphRef}>
{getModals()} {getModals()}
{!isEmpty(widget) && prevChartDataSetRef && ( {!isEmpty(widget) && prevChartDataSetRef && (
<> <>
@ -192,7 +199,7 @@ function GridCardGraph({
if (prevChartDataSetRef?.labels === undefined && queryResponse.isLoading) { if (prevChartDataSetRef?.labels === undefined && queryResponse.isLoading) {
return ( return (
<span> <span ref={graphRef}>
{!isEmpty(widget) && prevChartDataSetRef?.labels ? ( {!isEmpty(widget) && prevChartDataSetRef?.labels ? (
<> <>
<div className="drag-handle"> <div className="drag-handle">
@ -225,6 +232,7 @@ function GridCardGraph({
return ( return (
<span <span
ref={graphRef}
onMouseOver={(): void => { onMouseOver={(): void => {
setHovered(true); setHovered(true);
}} }}
@ -260,7 +268,7 @@ function GridCardGraph({
data={chartData} data={chartData}
isStacked={widget.isStacked} isStacked={widget.isStacked}
opacity={widget.opacity} opacity={widget.opacity}
title={' '} // empty title to accommodate absolutely positioned widget header title={' '} // `empty title to accommodate absolutely positioned widget header
name={name} name={name}
yAxisUnit={yAxisUnit} yAxisUnit={yAxisUnit}
onDragSelect={onDragSelect} onDragSelect={onDragSelect}

5
frontend/yarn.lock
View File

@ -11104,6 +11104,11 @@ react-i18next@^11.16.1:
"@babel/runtime" "^7.14.5" "@babel/runtime" "^7.14.5"
html-parse-stringify "^3.0.1" 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: react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
version "16.13.1" version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"