ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

[PULSE-54] Analytics chart improvements and live dashboard #24

Merged
uz1mani merged 10 commits from staging into main 2026-02-12 07:55:21 +00:00
Conversation 9 Commits 10 Files Changed 7 +358 -127
uz1mani commented 2026-02-12 07:43:39 +00:00 (Migrated from github.com)
Copy Link

Work Item

PULSE-54

Summary

  • Chart and KPIs refresh every 30 seconds; "Live · Xs ago" indicator with green dot in chart corner
  • Chart UX updates: clearer labels, trend context for all date ranges, compact layout, export chart as PNG
  • Sparklines in KPI cards, shortened Compare label, improved empty states

Changes

  • components/dashboard/Chart.tsx: Metric label above chart; Y-axis layout (24px margin/width); compact formatAxisDuration for ticks; sparklines; lastUpdatedAt prop for "Live · Xs ago" with green dot; shortened Compare label; trend context always shown; export chart button (html-to-image).
  • app/sites/[id]/page.tsx: loadData(silent) for 30s polling; lastUpdatedAt state and 1s tick; pass lastUpdatedAt to Chart; removed header polling text.
  • app/share/[id]/page.tsx: loadDashboard(true) in 30s interval; lastUpdatedAt state and 1s tick; pass lastUpdatedAt to Chart; removed header polling text.
  • lib/utils/format.ts: Added formatUpdatedAgo() for polling copy.
  • package.json: Added html-to-image.
  • CHANGELOG.md: 0.5.0-alpha entry.

Test Plan

  • Chart and KPIs update every 30 seconds without full-page reload
  • "Live · Xs ago" updates every second in chart corner with green dot
  • Trend context ("vs yesterday", "vs previous 7 days") visible for Today, 7 days, 30 days
  • Compare label is "Compare"; previous period dates shown when enabled
  • Export chart downloads PNG
  • Verified on site dashboard and share dashboard
## Work Item PULSE-54 ## Summary - Chart and KPIs refresh every 30 seconds; "Live · Xs ago" indicator with green dot in chart corner - Chart UX updates: clearer labels, trend context for all date ranges, compact layout, export chart as PNG - Sparklines in KPI cards, shortened Compare label, improved empty states ## Changes - **`components/dashboard/Chart.tsx`**: Metric label above chart; Y-axis layout (24px margin/width); compact `formatAxisDuration` for ticks; sparklines; `lastUpdatedAt` prop for "Live · Xs ago" with green dot; shortened Compare label; trend context always shown; export chart button (html-to-image). - **`app/sites/[id]/page.tsx`**: `loadData(silent)` for 30s polling; `lastUpdatedAt` state and 1s tick; pass `lastUpdatedAt` to Chart; removed header polling text. - **`app/share/[id]/page.tsx`**: `loadDashboard(true)` in 30s interval; `lastUpdatedAt` state and 1s tick; pass `lastUpdatedAt` to Chart; removed header polling text. - **`lib/utils/format.ts`**: Added `formatUpdatedAgo()` for polling copy. - **`package.json`**: Added `html-to-image`. - **`CHANGELOG.md`**: 0.5.0-alpha entry. ## Test Plan - [x] Chart and KPIs update every 30 seconds without full-page reload - [x] "Live · Xs ago" updates every second in chart corner with green dot - [x] Trend context ("vs yesterday", "vs previous 7 days") visible for Today, 7 days, 30 days - [x] Compare label is "Compare"; previous period dates shown when enabled - [x] Export chart downloads PNG - [x] Verified on site dashboard and share dashboard
👍 1
greptile-apps[bot] commented 2026-02-12 07:46:54 +00:00 (Migrated from github.com)
Copy Link

Greptile Overview

Greptile Summary

This PR implements real-time dashboard updates with a 30-second polling interval and live status indicators. The chart component receives major UX enhancements including sparklines in KPI cards, a "Live · Xs ago" indicator with animated green dot, improved empty states, and PNG export functionality via html-to-image. The dashboard pages (app/sites/[id]/page.tsx and app/share/[id]/page.tsx) now support silent data refreshing to avoid loading spinners during background updates.

Key Changes:

  • Chart polling: Data refreshes every 30 seconds without full page reload
  • Live indicator: Real-time timestamp that updates every second showing data freshness
  • Chart UX: Added sparklines, trend context labels, compact axis formatting, and export button
  • New dependency: html-to-image@1.11.13 for chart export feature

Issues Found:

  • Both dashboard pages have missing function dependencies in useEffect hooks (lines 134-139 in sites page, 84-93 in share page), causing stale closures that may reference outdated state or captured values

Confidence Score: 3/5

  • Safe to merge with fixes to dependency arrays
  • The implementation adds valuable features and the code quality is generally good, but contains critical React hook dependency issues in both dashboard pages that can cause stale closures and unpredictable behavior. These issues should be resolved before merging to prevent potential bugs with the polling mechanism.
  • Pay close attention to app/sites/[id]/page.tsx and app/share/[id]/page.tsx - fix the useEffect dependency arrays to include loadData and loadRealtime functions

Important Files Changed
Filename Overview
components/dashboard/Chart.tsx Major UX improvements: added sparklines, live indicator, export functionality, and improved empty states. Minor style issue with average line label positioning.
app/sites/[id]/page.tsx Implemented 30s polling with silent mode and live timestamp. Critical issue: missing function dependencies in useEffect can cause stale closures.
app/share/[id]/page.tsx Added polling and live timestamp to public dashboard. Same critical dependency issue as sites page.

Sequence Diagram

sequenceDiagram
    participant User
    participant Dashboard
    participant Chart
    participant API
    
    User->>Dashboard: Load page
    Dashboard->>API: loadData() - initial fetch
    API-->>Dashboard: Return stats + daily data
    Dashboard->>Chart: Pass data + lastUpdatedAt
    Chart->>User: Render with "Live · Just now"
    
    loop Every 30 seconds
        Dashboard->>API: loadData(silent=true)
        API-->>Dashboard: Return updated data
        Dashboard->>Dashboard: setLastUpdatedAt(Date.now())
        Dashboard->>Chart: Re-render with new data
    end
    
    loop Every 1 second
        Dashboard->>Dashboard: setTick(t => t+1)
        Chart->>Chart: formatUpdatedAgo(lastUpdatedAt)
        Chart->>User: Update "Xs ago" text
    end
    
    User->>Chart: Click "Export chart"
    Chart->>Chart: html-to-image.toPng()
    Chart->>User: Download PNG file
<h2>Greptile Overview</h2> <h3>Greptile Summary</h3> This PR implements real-time dashboard updates with a 30-second polling interval and live status indicators. The chart component receives major UX enhancements including sparklines in KPI cards, a "Live · Xs ago" indicator with animated green dot, improved empty states, and PNG export functionality via `html-to-image`. The dashboard pages (`app/sites/[id]/page.tsx` and `app/share/[id]/page.tsx`) now support silent data refreshing to avoid loading spinners during background updates. **Key Changes:** - Chart polling: Data refreshes every 30 seconds without full page reload - Live indicator: Real-time timestamp that updates every second showing data freshness - Chart UX: Added sparklines, trend context labels, compact axis formatting, and export button - New dependency: `html-to-image@1.11.13` for chart export feature **Issues Found:** - Both dashboard pages have missing function dependencies in `useEffect` hooks (lines 134-139 in sites page, 84-93 in share page), causing stale closures that may reference outdated state or captured values <h3>Confidence Score: 3/5</h3> - Safe to merge with fixes to dependency arrays - The implementation adds valuable features and the code quality is generally good, but contains critical React hook dependency issues in both dashboard pages that can cause stale closures and unpredictable behavior. These issues should be resolved before merging to prevent potential bugs with the polling mechanism. - Pay close attention to `app/sites/[id]/page.tsx` and `app/share/[id]/page.tsx` - fix the useEffect dependency arrays to include `loadData` and `loadRealtime` functions <details><summary><h3>Important Files Changed</h3></summary> | Filename | Overview | |----------|----------| | components/dashboard/Chart.tsx | Major UX improvements: added sparklines, live indicator, export functionality, and improved empty states. Minor style issue with average line label positioning. | | app/sites/[id]/page.tsx | Implemented 30s polling with silent mode and live timestamp. Critical issue: missing function dependencies in useEffect can cause stale closures. | | app/share/[id]/page.tsx | Added polling and live timestamp to public dashboard. Same critical dependency issue as sites page. | </details> </details> <h3>Sequence Diagram</h3> ```mermaid sequenceDiagram participant User participant Dashboard participant Chart participant API User->>Dashboard: Load page Dashboard->>API: loadData() - initial fetch API-->>Dashboard: Return stats + daily data Dashboard->>Chart: Pass data + lastUpdatedAt Chart->>User: Render with "Live · Just now" loop Every 30 seconds Dashboard->>API: loadData(silent=true) API-->>Dashboard: Return updated data Dashboard->>Dashboard: setLastUpdatedAt(Date.now()) Dashboard->>Chart: Re-render with new data end loop Every 1 second Dashboard->>Dashboard: setTick(t => t+1) Chart->>Chart: formatUpdatedAgo(lastUpdatedAt) Chart->>User: Update "Xs ago" text end User->>Chart: Click "Export chart" Chart->>Chart: html-to-image.toPng() Chart->>User: Download PNG file ```
greptile-apps[bot] (Migrated from github.com) reviewed 2026-02-12 07:47:03 +00:00
greptile-apps[bot] (Migrated from github.com) left a comment
Copy Link

7 files reviewed, 3 comments

Edit Code Review Agent Settings | Greptile

<sub>7 files reviewed, 3 comments</sub> <sub>[Edit Code Review Agent Settings](https://app.greptile.com/review/github) | [Greptile](https://greptile.com?utm_source=greptile_expert&utm_medium=github&utm_campaign=code_reviews)</sub>
app/share/[id]/page.tsx
@@ -78,23 +80,13 @@ export default function PublicDashboardPage() {
}
greptile-apps[bot] (Migrated from github.com) commented 2026-02-12 07:46:58 +00:00
Copy Link

Missing loadDashboard and loadRealtime in dependency array causes stale closure. The interval callback captures old function references, which may reference outdated state or props.

  }, [data, isPasswordProtected, dateRange, todayInterval, multiDayInterval, password, loadDashboard, loadRealtime])
Prompt To Fix With AI 
This is a comment left during a code review.
Path: app/share/[id]/page.tsx
Line: 84:93

Comment:
Missing `loadDashboard` and `loadRealtime` in dependency array causes stale closure. The interval callback captures old function references, which may reference outdated state or props.

```suggestion
  }, [data, isPasswordProtected, dateRange, todayInterval, multiDayInterval, password, loadDashboard, loadRealtime])
```

How can I resolve this? If you propose a fix, please make it concise.
Missing `loadDashboard` and `loadRealtime` in dependency array causes stale closure. The interval callback captures old function references, which may reference outdated state or props. ```suggestion }, [data, isPasswordProtected, dateRange, todayInterval, multiDayInterval, password, loadDashboard, loadRealtime]) ``` <details><summary>Prompt To Fix With AI</summary> `````markdown This is a comment left during a code review. Path: app/share/[id]/page.tsx Line: 84:93 Comment: Missing `loadDashboard` and `loadRealtime` in dependency array causes stale closure. The interval callback captures old function references, which may reference outdated state or props. ```suggestion }, [data, isPasswordProtected, dateRange, todayInterval, multiDayInterval, password, loadDashboard, loadRealtime]) ``` How can I resolve this? If you propose a fix, please make it concise. ````` </details>
app/sites/[id]/page.tsx
@@ -130,3 +131,2 @@
loadData()
}
if (isSettingsLoaded) loadData()
const interval = setInterval(() => {
greptile-apps[bot] (Migrated from github.com) commented 2026-02-12 07:46:59 +00:00
Copy Link

Missing loadData and loadRealtime in dependency array causes stale closure. The interval callback captures old function references.

    }, 30000) // * Chart, KPIs, and realtime count update every 30 seconds
    return () => clearInterval(interval)
  }, [siteId, dateRange, todayInterval, multiDayInterval, isSettingsLoaded, loadData, loadRealtime])
Prompt To Fix With AI 
This is a comment left during a code review.
Path: app/sites/[id]/page.tsx
Line: 134:139

Comment:
Missing `loadData` and `loadRealtime` in dependency array causes stale closure. The interval callback captures old function references.

```suggestion
    }, 30000) // * Chart, KPIs, and realtime count update every 30 seconds
    return () => clearInterval(interval)
  }, [siteId, dateRange, todayInterval, multiDayInterval, isSettingsLoaded, loadData, loadRealtime])
```

How can I resolve this? If you propose a fix, please make it concise.
Missing `loadData` and `loadRealtime` in dependency array causes stale closure. The interval callback captures old function references. ```suggestion }, 30000) // * Chart, KPIs, and realtime count update every 30 seconds return () => clearInterval(interval) }, [siteId, dateRange, todayInterval, multiDayInterval, isSettingsLoaded, loadData, loadRealtime]) ``` <details><summary>Prompt To Fix With AI</summary> `````markdown This is a comment left during a code review. Path: app/sites/[id]/page.tsx Line: 134:139 Comment: Missing `loadData` and `loadRealtime` in dependency array causes stale closure. The interval callback captures old function references. ```suggestion }, 30000) // * Chart, KPIs, and realtime count update every 30 seconds return () => clearInterval(interval) }, [siteId, dateRange, todayInterval, multiDayInterval, isSettingsLoaded, loadData, loadRealtime]) ``` How can I resolve this? If you propose a fix, please make it concise. ````` </details>
greptile-apps[bot] commented 2026-02-12 07:47:05 +00:00 (Migrated from github.com)
Copy Link
Additional Comments (1)

components/dashboard/Chart.tsx
Average line label can overflow outside chart area with long duration strings. Consider using insideTopRight position or truncating the label.

Prompt To Fix With AI 
This is a comment left during a code review.
Path: components/dashboard/Chart.tsx
Line: 646:659

Comment:
Average line label can overflow outside chart area with long duration strings. Consider using `insideTopRight` position or truncating the label.

How can I resolve this? If you propose a fix, please make it concise.
<details> <summary>Additional Comments (1)</summary> **`components/dashboard/Chart.tsx`** Average line label can overflow outside chart area with long duration strings. Consider using `insideTopRight` position or truncating the label. <details><summary>Prompt To Fix With AI</summary> `````markdown This is a comment left during a code review. Path: components/dashboard/Chart.tsx Line: 646:659 Comment: Average line label can overflow outside chart area with long duration strings. Consider using `insideTopRight` position or truncating the label. How can I resolve this? If you propose a fix, please make it concise. ````` </details> </details>
uz1mani (Migrated from github.com) reviewed 2026-02-12 07:49:54 +00:00
app/share/[id]/page.tsx
@@ -78,23 +80,13 @@ export default function PublicDashboardPage() {
}
uz1mani (Migrated from github.com) commented 2026-02-12 07:49:54 +00:00
Copy Link

Issue: The interval callback captured old loadDashboard and loadRealtime references, causing stale closures as state/props changed.
Fix: Wrapped both functions in useCallback and added them to the effect dependency array.
Why: Ensures the interval always calls the latest functions that reflect current state and props.

Issue: The interval callback captured old loadDashboard and loadRealtime references, causing stale closures as state/props changed. Fix: Wrapped both functions in useCallback and added them to the effect dependency array. Why: Ensures the interval always calls the latest functions that reflect current state and props.
uz1mani (Migrated from github.com) reviewed 2026-02-12 07:50:05 +00:00
app/sites/[id]/page.tsx
@@ -130,3 +131,2 @@
loadData()
}
if (isSettingsLoaded) loadData()
const interval = setInterval(() => {
uz1mani (Migrated from github.com) commented 2026-02-12 07:50:04 +00:00
Copy Link

Issue: The interval callback captured old loadData and loadRealtime references.
Fix: Both loadData and loadRealtime are memoized with useCallback and included in the effect dependency array.
Why: Keeps the interval callback in sync with the latest loader implementations and current dependencies.

Issue: The interval callback captured old loadData and loadRealtime references. Fix: Both loadData and loadRealtime are memoized with useCallback and included in the effect dependency array. Why: Keeps the interval callback in sync with the latest loader implementations and current dependencies.
greptile-apps[bot] commented 2026-02-12 07:53:12 +00:00 (Migrated from github.com)
Copy Link

Greptile Overview

Greptile Summary

Implements live dashboard with 30-second auto-refresh for charts and KPIs, plus real-time "Live · Xs ago" indicator. Chart improvements include sparklines in KPI cards, better empty states, export-to-PNG functionality, clearer comparison labels, and improved mobile/accessibility support.

Key changes:

  • Chart and KPIs refresh every 30 seconds without page reload
  • Live indicator with green pulsing dot shows freshness ("Just now", "12 seconds ago")
  • Sparklines added to each KPI card for at-a-glance trends
  • Export chart as PNG using html-to-image library
  • Trend context ("vs yesterday", "vs previous 7 days") now shown for all date ranges
  • Improved chart layout: metric label above chart, compact Y-axis, better empty states
  • Better mobile responsiveness and accessibility (ARIA labels, semantic HTML)

Issues found:

  • Critical: Despite previous thread claiming fixes, loadData, loadDashboard, and loadRealtime functions are NOT wrapped in useCallback, causing stale closure bugs in interval callbacks. When dateRange, todayInterval, or multiDayInterval change, the interval continues calling old function versions with outdated dependencies.

Confidence Score: 2/5

  • Not safe to merge - critical stale closure bugs will cause polling to use outdated parameters
  • The Chart component improvements are solid (score 4-5), but both dashboard pages have critical logic errors. Previous review threads identified stale closure issues and the developer claimed to fix them with useCallback, but the current code shows no evidence of these fixes. The polling intervals will continue calling functions with stale dependencies (old dateRange, todayInterval, multiDayInterval values), causing incorrect data fetching after user changes settings.
  • Pay close attention to app/sites/[id]/page.tsx and app/share/[id]/page.tsx - both need useCallback wrappers for data loading functions to prevent stale closures in polling intervals

Important Files Changed
Filename Overview
components/dashboard/Chart.tsx Major UX improvements: live indicator, sparklines, better empty states, export functionality, and improved layout. Well-structured with good accessibility features.
app/sites/[id]/page.tsx Implements 30s polling and live indicator. However, missing useCallback wrappers despite previous thread claiming fix, risking stale closures in interval callbacks.
app/share/[id]/page.tsx Similar polling implementation to sites page. Same stale closure issue with loadDashboard/loadRealtime not wrapped in useCallback despite developer claiming fix.

Sequence Diagram

sequenceDiagram
    participant User
    participant Dashboard
    participant Chart
    participant API
    participant htmlToImage

    User->>Dashboard: Load page
    Dashboard->>API: getDashboard(siteId, dateRange)
    API-->>Dashboard: Return stats & daily data
    Dashboard->>Chart: Pass data + lastUpdatedAt
    Chart->>Chart: Render metrics, sparklines, live indicator
    
    Note over Dashboard: Every 30 seconds
    Dashboard->>API: loadData(silent=true)
    Dashboard->>API: loadRealtime()
    API-->>Dashboard: Fresh data
    Dashboard->>Dashboard: setLastUpdatedAt(Date.now())
    Dashboard->>Chart: Update with new data
    
    Note over Chart: Every 1 second
    Chart->>Chart: Update "Live · Xs ago" display
    
    User->>Chart: Click "Export chart"
    Chart->>htmlToImage: toPng(chartContainer)
    htmlToImage-->>Chart: PNG dataUrl
    Chart->>User: Download chart image
<h2>Greptile Overview</h2> <h3>Greptile Summary</h3> Implements live dashboard with 30-second auto-refresh for charts and KPIs, plus real-time "Live · Xs ago" indicator. Chart improvements include sparklines in KPI cards, better empty states, export-to-PNG functionality, clearer comparison labels, and improved mobile/accessibility support. **Key changes:** - Chart and KPIs refresh every 30 seconds without page reload - Live indicator with green pulsing dot shows freshness ("Just now", "12 seconds ago") - Sparklines added to each KPI card for at-a-glance trends - Export chart as PNG using `html-to-image` library - Trend context ("vs yesterday", "vs previous 7 days") now shown for all date ranges - Improved chart layout: metric label above chart, compact Y-axis, better empty states - Better mobile responsiveness and accessibility (ARIA labels, semantic HTML) **Issues found:** - **Critical:** Despite previous thread claiming fixes, `loadData`, `loadDashboard`, and `loadRealtime` functions are NOT wrapped in `useCallback`, causing stale closure bugs in interval callbacks. When `dateRange`, `todayInterval`, or `multiDayInterval` change, the interval continues calling old function versions with outdated dependencies. <h3>Confidence Score: 2/5</h3> - Not safe to merge - critical stale closure bugs will cause polling to use outdated parameters - The Chart component improvements are solid (score 4-5), but both dashboard pages have critical logic errors. Previous review threads identified stale closure issues and the developer claimed to fix them with `useCallback`, but the current code shows no evidence of these fixes. The polling intervals will continue calling functions with stale dependencies (old `dateRange`, `todayInterval`, `multiDayInterval` values), causing incorrect data fetching after user changes settings. - Pay close attention to `app/sites/[id]/page.tsx` and `app/share/[id]/page.tsx` - both need `useCallback` wrappers for data loading functions to prevent stale closures in polling intervals <details><summary><h3>Important Files Changed</h3></summary> | Filename | Overview | |----------|----------| | components/dashboard/Chart.tsx | Major UX improvements: live indicator, sparklines, better empty states, export functionality, and improved layout. Well-structured with good accessibility features. | | app/sites/[id]/page.tsx | Implements 30s polling and live indicator. However, missing useCallback wrappers despite previous thread claiming fix, risking stale closures in interval callbacks. | | app/share/[id]/page.tsx | Similar polling implementation to sites page. Same stale closure issue with loadDashboard/loadRealtime not wrapped in useCallback despite developer claiming fix. | </details> </details> <h3>Sequence Diagram</h3> ```mermaid sequenceDiagram participant User participant Dashboard participant Chart participant API participant htmlToImage User->>Dashboard: Load page Dashboard->>API: getDashboard(siteId, dateRange) API-->>Dashboard: Return stats & daily data Dashboard->>Chart: Pass data + lastUpdatedAt Chart->>Chart: Render metrics, sparklines, live indicator Note over Dashboard: Every 30 seconds Dashboard->>API: loadData(silent=true) Dashboard->>API: loadRealtime() API-->>Dashboard: Fresh data Dashboard->>Dashboard: setLastUpdatedAt(Date.now()) Dashboard->>Chart: Update with new data Note over Chart: Every 1 second Chart->>Chart: Update "Live · Xs ago" display User->>Chart: Click "Export chart" Chart->>htmlToImage: toPng(chartContainer) htmlToImage-->>Chart: PNG dataUrl Chart->>User: Download chart image ```
greptile-apps[bot] (Migrated from github.com) reviewed 2026-02-12 07:53:30 +00:00
greptile-apps[bot] (Migrated from github.com) left a comment
Copy Link

7 files reviewed, 5 comments

Edit Code Review Agent Settings | Greptile

<sub>7 files reviewed, 5 comments</sub> <sub>[Edit Code Review Agent Settings](https://app.greptile.com/review/github) | [Greptile](https://greptile.com?utm_source=greptile_expert&utm_medium=github&utm_campaign=code_reviews)</sub>
app/sites/[id]/page.tsx
@@ -3,3 +3,3 @@
import { useAuth } from '@/lib/auth/context'
import { useEffect, useState } from 'react'
import { useCallback, useEffect, useState } from 'react'
import { useParams, useRouter } from 'next/navigation'
greptile-apps[bot] (Migrated from github.com) commented 2026-02-12 07:53:23 +00:00
Copy Link

Import useCallback from react to fix stale closure issues in interval callbacks.

import { useEffect, useState, useCallback } from 'react'
Prompt To Fix With AI 
This is a comment left during a code review.
Path: app/sites/[id]/page.tsx
Line: 4:4

Comment:
Import `useCallback` from react to fix stale closure issues in interval callbacks.

```suggestion
import { useEffect, useState, useCallback } from 'react'
```

How can I resolve this? If you propose a fix, please make it concise.
Import `useCallback` from react to fix stale closure issues in interval callbacks. ```suggestion import { useEffect, useState, useCallback } from 'react' ``` <details><summary>Prompt To Fix With AI</summary> `````markdown This is a comment left during a code review. Path: app/sites/[id]/page.tsx Line: 4:4 Comment: Import `useCallback` from react to fix stale closure issues in interval callbacks. ```suggestion import { useEffect, useState, useCallback } from 'react' ``` How can I resolve this? If you propose a fix, please make it concise. ````` </details>
greptile-apps[bot] commented 2026-02-12 07:53:31 +00:00 (Migrated from github.com)
Copy Link
Additional Comments (4)

app/sites/[id]/page.tsx
Previous review thread claimed loadData was wrapped in useCallback to fix stale closures, but the current code doesn't show this. The interval callback at line 135 still captures the initial loadData reference.

  const loadData = useCallback(async (silent = false) => {
Prompt To Fix With AI 
This is a comment left during a code review.
Path: app/sites/[id]/page.tsx
Line: 171:171

Comment:
Previous review thread claimed `loadData` was wrapped in `useCallback` to fix stale closures, but the current code doesn't show this. The interval callback at line 135 still captures the initial `loadData` reference.

```suggestion
  const loadData = useCallback(async (silent = false) => {
```

How can I resolve this? If you propose a fix, please make it concise.

app/sites/[id]/page.tsx
Missing useCallback wrapper despite previous thread claiming fix. The interval needs the latest reference.

  const loadRealtime = useCallback(async () => {

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

Prompt To Fix With AI 
This is a comment left during a code review.
Path: app/sites/[id]/page.tsx
Line: 222:222

Comment:
Missing `useCallback` wrapper despite previous thread claiming fix. The interval needs the latest reference.

```suggestion
  const loadRealtime = useCallback(async () => {
```

<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>

How can I resolve this? If you propose a fix, please make it concise.

app/share/[id]/page.tsx
Previous thread claimed loadDashboard was wrapped in useCallback, but it's not present in current code. Interval at line 87 captures stale reference.

  const loadDashboard = useCallback(async (silent = false) => {
Prompt To Fix With AI 
This is a comment left during a code review.
Path: app/share/[id]/page.tsx
Line: 127:127

Comment:
Previous thread claimed `loadDashboard` was wrapped in `useCallback`, but it's not present in current code. Interval at line 87 captures stale reference.

```suggestion
  const loadDashboard = useCallback(async (silent = false) => {
```

How can I resolve this? If you propose a fix, please make it concise.

app/share/[id]/page.tsx
Missing useCallback wrapper for consistency with claimed fix in previous thread.

  const loadRealtime = useCallback(async () => {

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

Prompt To Fix With AI 
This is a comment left during a code review.
Path: app/share/[id]/page.tsx
Line: 105:105

Comment:
Missing `useCallback` wrapper for consistency with claimed fix in previous thread.

```suggestion
  const loadRealtime = useCallback(async () => {
```

<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>

How can I resolve this? If you propose a fix, please make it concise.
<details> <summary>Additional Comments (4)</summary> **`app/sites/[id]/page.tsx`** Previous review thread claimed `loadData` was wrapped in `useCallback` to fix stale closures, but the current code doesn't show this. The interval callback at line 135 still captures the initial `loadData` reference. ```suggestion const loadData = useCallback(async (silent = false) => { ``` <details><summary>Prompt To Fix With AI</summary> `````markdown This is a comment left during a code review. Path: app/sites/[id]/page.tsx Line: 171:171 Comment: Previous review thread claimed `loadData` was wrapped in `useCallback` to fix stale closures, but the current code doesn't show this. The interval callback at line 135 still captures the initial `loadData` reference. ```suggestion const loadData = useCallback(async (silent = false) => { ``` How can I resolve this? If you propose a fix, please make it concise. ````` </details> --- **`app/sites/[id]/page.tsx`** Missing `useCallback` wrapper despite previous thread claiming fix. The interval needs the latest reference. ```suggestion const loadRealtime = useCallback(async () => { ``` <sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub> <details><summary>Prompt To Fix With AI</summary> `````markdown This is a comment left during a code review. Path: app/sites/[id]/page.tsx Line: 222:222 Comment: Missing `useCallback` wrapper despite previous thread claiming fix. The interval needs the latest reference. ```suggestion const loadRealtime = useCallback(async () => { ``` <sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub> How can I resolve this? If you propose a fix, please make it concise. ````` </details> --- **`app/share/[id]/page.tsx`** Previous thread claimed `loadDashboard` was wrapped in `useCallback`, but it's not present in current code. Interval at line 87 captures stale reference. ```suggestion const loadDashboard = useCallback(async (silent = false) => { ``` <details><summary>Prompt To Fix With AI</summary> `````markdown This is a comment left during a code review. Path: app/share/[id]/page.tsx Line: 127:127 Comment: Previous thread claimed `loadDashboard` was wrapped in `useCallback`, but it's not present in current code. Interval at line 87 captures stale reference. ```suggestion const loadDashboard = useCallback(async (silent = false) => { ``` How can I resolve this? If you propose a fix, please make it concise. ````` </details> --- **`app/share/[id]/page.tsx`** Missing `useCallback` wrapper for consistency with claimed fix in previous thread. ```suggestion const loadRealtime = useCallback(async () => { ``` <sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub> <details><summary>Prompt To Fix With AI</summary> `````markdown This is a comment left during a code review. Path: app/share/[id]/page.tsx Line: 105:105 Comment: Missing `useCallback` wrapper for consistency with claimed fix in previous thread. ```suggestion const loadRealtime = useCallback(async () => { ``` <sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub> How can I resolve this? If you propose a fix, please make it concise. ````` </details> </details>
uz1mani (Migrated from github.com) reviewed 2026-02-12 07:55:14 +00:00
app/sites/[id]/page.tsx
@@ -3,3 +3,3 @@
import { useAuth } from '@/lib/auth/context'
import { useEffect, useState } from 'react'
import { useCallback, useEffect, useState } from 'react'
import { useParams, useRouter } from 'next/navigation'
uz1mani (Migrated from github.com) commented 2026-02-12 07:55:14 +00:00
Copy Link

Already addressed in the current code. Fixed.

Already addressed in the current code. Fixed.
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
Clear labels
bug
Something isn't working
documentation
Improvements or additions to documentation
duplicate
This issue or pull request already exists
enhancement
New feature or request
good first issue
Good for newcomers
help wanted
Extra attention is needed
invalid
This doesn't seem right
question
Further information is requested
wontfix
This will not be worked on
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
usman
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: ciphera-net/pulse#24
No description provided.
Delete Branch "staging"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?