Skip to content

feat: Add reload button to info panel on long loading time #3184

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mtrezza merged 6 commits into from
Feb 7, 2026
Merged

feat: Add reload button to info panel on long loading time #3184

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e0a3a16
feat
mtrezza Feb 6, 2026
57927af
feat
mtrezza Feb 6, 2026
8b8f897
fade in
mtrezza Feb 6, 2026
3da514d
Merge branch 'alpha' into feat/reload-panel
mtrezza Feb 6, 2026
ca3c6d8
fix
mtrezza Feb 6, 2026
50b1e76
fix
mtrezza Feb 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 60 additions & 1 deletion src/components/AggregationPanel/AggregationPanel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import Icon from 'components/Icon/Icon.react';
import LoaderDots from 'components/LoaderDots/LoaderDots.react';
import Parse from 'parse';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import styles from './AggregationPanel.scss';
import {
AudioElement,
Expand Down Expand Up @@ -28,10 +29,16 @@ const AggregationPanel = ({
panelTitle = null,
style,
onContextMenu,
onReload,
}) => {
const [isExpanded, setIsExpanded] = useState(false);
const [nestedData, setNestedData] = useState(null);
const [isLoadingNested, setIsLoadingNested] = useState(false);
const [showReloadButton, setShowReloadButton] = useState(false);
const [reloadCount, setReloadCount] = useState(0);
const [elapsedSeconds, setElapsedSeconds] = useState(0);
const reloadTimerRef = useRef(null);
const elapsedIntervalRef = useRef(null);

useEffect(() => {
if (Object.keys(errorAggregatedData).length !== 0) {
Expand All @@ -45,6 +52,26 @@ const AggregationPanel = ({
[depth, selectedObjectId, isLoadingCloudFunction, showAggregatedData]
);

const isLoading = depth === 0 ? isLoadingInfoPanel : isLoadingNested;

useEffect(() => {
clearTimeout(reloadTimerRef.current);
clearInterval(elapsedIntervalRef.current);
if (isLoading) {
setShowReloadButton(false);
setElapsedSeconds(0);
elapsedIntervalRef.current = setInterval(() => setElapsedSeconds(s => s + 1), 1_000);
reloadTimerRef.current = setTimeout(() => setShowReloadButton(true), 3_000);
} else {
setShowReloadButton(false);
setElapsedSeconds(0);
}
return () => {
clearTimeout(reloadTimerRef.current);
clearInterval(elapsedIntervalRef.current);
};
}, [isLoading, reloadCount]);

const shouldShowAggregatedData = useMemo(
() =>
depth === 0
Expand Down Expand Up @@ -93,6 +120,16 @@ const AggregationPanel = ({
fetchNestedData();
}, [fetchNestedData]);

const handleReload = useCallback(() => {
setShowReloadButton(false);
setReloadCount(c => c + 1);
if (depth === 0 && onReload) {
onReload();
} else {
fetchNestedData();
}
}, [depth, onReload, fetchNestedData]);

const renderSegmentContent = (segment, index) => (
<div key={index} className={styles.segmentContainer} style={segment.style}>
<h2 className={styles.heading} style={segment.titleStyle}>{segment.title}</h2>
Expand Down Expand Up @@ -179,6 +216,17 @@ const AggregationPanel = ({
{isLoadingNested ? (
<div className={styles.loader}>
<LoaderDots />
{showReloadButton && (
<div className={styles.reloadControls}>
<span className={styles.elapsedTimer}>{elapsedSeconds}s</span>
<button
onClick={handleReload}
className={styles.reloadButton}
>
<Icon name="refresh-solid" width={20} height={20} fill="#169cee" />
</button>
</div>
)}
</div>
) : (
nestedData &&
Expand Down Expand Up @@ -213,6 +261,17 @@ const AggregationPanel = ({
{isLoadingInfoPanel ? (
<div className={styles.center}>
<LoaderDots />
{showReloadButton && onReload && (
<div className={styles.reloadControls}>
<span className={styles.elapsedTimer}>{elapsedSeconds}s</span>
<button
onClick={handleReload}
className={styles.reloadButton}
>
<Icon name="refresh-outline" width={20} height={20} fill="#169cee" />
</button>
</div>
)}
</div>
) : shouldShowAggregatedData ? (
<div className={styles.mainContent}>
Expand Down
39 changes: 38 additions & 1 deletion src/components/AggregationPanel/AggregationPanel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,13 +163,50 @@
}

.loader {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.reloadControls {
position: absolute;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
margin-top: 6px;
animation: fadeIn 0.5s ease-in;
}

.elapsedTimer {
color: #999;
font-size: 12px;
}

.reloadButton {
background: none;
border: none;
padding: 8px 12px;
cursor: pointer;
color: $blue;
font-size: 13px;
margin-top: 10px;

&:hover {
color: $darkBlue;
}
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

.segmentContainer {
border-left: 1px solid #e3e3ea;
border-left: 1px solid #e3e3ea;
border-bottom: 1px solid #e3e3ea;
margin-bottom: 16px;
}
3 changes: 3 additions & 0 deletions src/dashboard/Data/Browser/DataBrowser.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2681,6 +2681,7 @@ export default class DataBrowser extends React.Component {
appName={this.props.appName}
className={this.props.className}
onContextMenu={this.handleAggregationPanelTextContextMenu}
onReload={() => this.props.callCloudFunction(this.state.selectedObjectId, this.props.className, this.props.app.applicationId)}
/>
);
}
Expand Down Expand Up @@ -2744,6 +2745,7 @@ export default class DataBrowser extends React.Component {
appName={this.props.appName}
className={this.props.className}
onContextMenu={this.handleAggregationPanelTextContextMenu}
onReload={() => this.props.callCloudFunction(objectId, this.props.className, this.props.app.applicationId)}
/>
</div>
{index < this.state.displayedObjectIds.length - 1 && (
Expand All @@ -2767,6 +2769,7 @@ export default class DataBrowser extends React.Component {
appName={this.props.appName}
className={this.props.className}
onContextMenu={this.handleAggregationPanelTextContextMenu}
onReload={() => this.props.callCloudFunction(this.state.selectedObjectId, this.props.className, this.props.app.applicationId)}
/>
)}
</div>
Expand Down
Loading