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

[mtrezza]

Pull Request

• Report security issues confidentially.
• Any contribution is under this license.

Feature

Add reload button to info panel on long loading time.

Summary by CodeRabbit

• New Features

  • Added reload capability to aggregation panels (top-level and nested) so users can refresh data on demand.
  • Reload control appears after 3 seconds of loading and shows an elapsed time counter while loading.
  • Reload actions now invoke the panel refresh flow so external data sources can be re-requested.

• Style

  • Loading UI updated with fade-in animation, repositioned timer/reload button, and adjusted loader layout.

[parse-github-assistant]

🚀 Thanks for opening this pull request!

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a delayed reload UI to AggregationPanel (3s delay before showing a reload button and an elapsed-seconds timer), exposes a public onReload prop, and wires DataBrowser to call a cloud function when the panel requests a reload.

Changes

Cohort / File(s)	Summary
AggregationPanel (logic + styles) src/components/AggregationPanel/AggregationPanel.js, src/components/AggregationPanel/AggregationPanel.scss	Adds public onReload prop; introduces loading UI state (showReloadButton, reloadCount, elapsedSeconds) plus timer refs and effects to show a reload button after 3s and run an elapsed timer; implements handleReload to call onReload or existing fetchNestedData; adds reload button/elapsed timer markup and CSS (.reloadControls, .elapsedTimer, .reloadButton, @keyframes fadeIn).
DataBrowser integration src/dashboard/Data/Browser/DataBrowser.react.js	Wires onReload into three AggregationPanel instances to call this.props.callCloudFunction(objectIdOrSelectedObjectId, className, appId) so reload triggers a cloud function refresh.

Sequence Diagram

sequenceDiagram
    participant User as User
    participant Panel as AggregationPanel
    participant Timer as ReloadTimer
    participant DB as DataBrowser
    participant Cloud as CloudFunction

    User->>Panel: initiates load
    activate Panel
    Panel->>Timer: start 3s delay & elapsed timer
    activate Timer
    Timer->>Timer: wait 3s
    Timer-->>Panel: show reload button & elapsed seconds
    User->>Panel: click reload
    deactivate Timer
    Panel->>DB: onReload(...)
    activate DB
    DB->>Cloud: callCloudFunction(objectId, className, appId)
    activate Cloud
    Cloud-->>DB: return refreshed data
    deactivate Cloud
    DB-->>Panel: update data / stop loading
    deactivate DB
    Panel->>Panel: reset timers & loading UI
    deactivate Panel

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• fix: No individual data loading indicators when displaying multiple info panels #3026 — Modifies per-panel loading behavior in DataBrowser.react.js, touching the same loading/reload integration points.
• fix: Info panel may show stale data of previous objects when refreshing the data table or navigating between classes #3036 — Changes DataBrowser.react.js and AggregationPanel usage related to panel refresh/clear logic.
• fix: Info panel data not reloading when clicking refresh button in data browser #3027 — Adds/adjusts reload/refresh handlers for panels in DataBrowser, overlapping with this PR's wiring.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description is incomplete. While it briefly states the feature purpose, it is missing required template sections: Issue/Closes link, detailed Approach section, and Tasks checklist.	Complete the description by adding the Issue link (Closes field), a detailed Approach section explaining the implementation, and the Tasks checklist with relevant items checked or deleted.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title clearly and concisely summarizes the main change: adding a reload button to the info panel that appears during long loading times, which aligns with the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[parseplatformorg]

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/components/AggregationPanel/AggregationPanel.scss`:
- Around line 165-170: The .loader rule currently lacks a positioning context so
its absolutely-positioned children (.elapsedTimer and .reloadButton) can escape;
update the .loader CSS rule (the .loader selector in AggregationPanel.scss) to
include position: relative so it becomes the containing block for .elapsedTimer
and .reloadButton, ensuring they are positioned correctly inside nested panels.

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/components/AggregationPanel/AggregationPanel.scss`:
- Around line 173-199: .elapsedTimer and .reloadButton are both absolutely
positioned inside the .loader (which is a centered flex column) causing them to
overlap when showReloadButton becomes true; remove position: absolute, left,
transform from both .elapsedTimer and .reloadButton so they participate in
normal flex flow (use margin-top for spacing) and rely on .loader's
align-items:center and flex-direction:column to stack them under the spinner;
also replace the hardcoded color `#999` in .elapsedTimer with an SCSS variable
(e.g., $mediumGrey) to match the file's variable usage.

[parseplatformorg]

🎉 This change has been released in version 8.5.0-alpha.1

[parseplatformorg]

🎉 This change has been released in version 8.5.0