feat(datatrak): RN-1747: ↻ animation when syncing #6574

jaskfla · 2025-12-08T01:01:36Z

Only tangentially related to RN-1717, but need a ticket number to pass CI check for PR title

gemini-code-assist · 2025-12-08T01:01:48Z

Summary of Changes

Hello @jaskfla, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request improves the user interface by adding a dynamic visual cue for ongoing data synchronization. When a sync operation is active, the sync button will now display a subtle spinning animation, providing immediate feedback to the user about the system's current state. This enhancement leverages a newly created React hook to monitor sync events and control the animation's visibility.

Highlights

Visual Sync Indicator: Implemented a spinning animation for the sync button to visually indicate when data synchronization is active.
New useIsSyncing Hook: Introduced a custom React hook (useIsSyncing) to track and expose the current synchronization status.
Icon Update: Replaced the RefreshCcw icon with RefreshCw from lucide-react in the sync button component.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

packages/datatrak-web/src/layout/Header/SyncButton.tsx

packages/datatrak-web/src/sync/useIsSyncing.ts

gemini-code-assist

Code Review

This pull request introduces a spinning animation on the sync button to indicate when a sync is in progress. This is achieved by adding a new useIsSyncing hook to track the sync status and applying a CSS animation to the sync icon. My review includes suggestions to improve the implementation in both new and modified files. In SyncButton.tsx, I've suggested a refactoring to better encapsulate styling logic within the styled-component. For the new useIsSyncing.ts hook, I've proposed a change to make it more robust by ensuring the initial sync state is correctly determined. These changes will improve the maintainability and correctness of the new feature.

packages/datatrak-web/src/sync/useIsSyncing.ts

packages/datatrak-web/src/layout/Header/SyncButton.tsx

packages/datatrak-web/src/sync/useIsSyncing.ts

jaskfla · 2025-12-09T02:45:57Z

packages/datatrak-web/src/sync/useIsSyncing.ts

+    emitter.on(SYNC_EVENT_ACTIONS.SYNC_STARTED, set);
+    emitter.on(SYNC_EVENT_ACTIONS.SYNC_ENDED, unset);
+
+    return () => {
+      emitter.off(SYNC_EVENT_ACTIONS.SYNC_STARTED, set);
+      emitter.off(SYNC_EVENT_ACTIONS.SYNC_ENDED, unset);
+    };


This logic taken directly from SyncPage’s Effect, but: wouldn’t it make more sense to read the value directly from clientSyncManager.isSyncing?

This way there’s a single source of truth

Agreed, let's read from clientSyncManager.isSyncing 👍

chris-bes

LGTM!

cursor · 2025-12-11T03:07:40Z

packages/datatrak-web/src/sync/useIsSyncing.ts

+  const update = useCallback(
+    () => void setIsSyncing(syncManager?.isSyncing ?? false),
+    [syncManager?.isSyncing],
+  );


Bug: Stale closure in useCallback due to incorrect dependencies

The useCallback dependency array includes syncManager?.isSyncing, which is a primitive value that gets captured at render time. This causes the callback to be recreated when React notices the value changed (during re-render), but the event listener subscriptions in the useEffect still hold references to older callback versions until the effect re-runs. The dependency should be [syncManager] since the callback needs to read isSyncing fresh from the stable syncManager object reference at invocation time, not depend on the value being captured at callback creation.

I’ll do some dev testing

cursor · 2025-12-11T03:07:40Z

packages/datatrak-web/src/layout/Header/SyncButton.tsx

+    to {
+      transform: rotate(1turn);
+    }
+  }


Bug: CSS keyframe name with double-hyphen prefix may fail

The keyframe animation name --spin-sync-button starts with double hyphens, which follows the CSS custom property naming convention (<dashed-ident>). However, @keyframes expects a <custom-ident> which explicitly excludes identifiers starting with --. This could cause the animation to silently fail or not apply in some browsers, preventing the sync button from spinning during sync operations.

Absolute BS. The -- prefix is best practice.

jaskfla commented Dec 8, 2025

View reviewed changes

packages/datatrak-web/src/layout/Header/SyncButton.tsx Show resolved Hide resolved

jaskfla commented Dec 8, 2025

View reviewed changes

packages/datatrak-web/src/sync/useIsSyncing.ts Show resolved Hide resolved

gemini-code-assist bot reviewed Dec 8, 2025

View reviewed changes

packages/datatrak-web/src/sync/useIsSyncing.ts Show resolved Hide resolved

packages/datatrak-web/src/layout/Header/SyncButton.tsx Show resolved Hide resolved

cursor bot reviewed Dec 8, 2025

View reviewed changes

packages/datatrak-web/src/sync/useIsSyncing.ts Outdated Show resolved Hide resolved

jaskfla force-pushed the sync-animation branch from 328c177 to 4f9a81e Compare December 8, 2025 20:35

jaskfla commented Dec 9, 2025

View reviewed changes

jaskfla force-pushed the sync-animation branch from 4f9a81e to 9530f0a Compare December 9, 2025 02:53

jaskfla mentioned this pull request Dec 10, 2025

refactor(datatrak): decompose sync status listener hooks #6578

Closed

jaskfla force-pushed the sync-animation branch from 9530f0a to ba7a20d Compare December 11, 2025 01:46

chris-bes approved these changes Dec 11, 2025

View reviewed changes

cursor bot reviewed Dec 11, 2025

View reviewed changes

jaskfla marked this pull request as draft January 5, 2026 02:50

jaskfla force-pushed the rn-1717-test-four branch 3 times, most recently from 55e4843 to 2600161 Compare January 5, 2026 22:55

jaskfla added 4 commits January 20, 2026 13:58

🔄

f55e6a2

read initial value from sync manager

d4772b9

treat ClientSyncManager.isSyncing as source of truth

adada5a

comment

4ebb718

jaskfla force-pushed the sync-animation branch from d4881d6 to 4ebb718 Compare January 20, 2026 00:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(datatrak): RN-1747: ↻ animation when syncing #6574

feat(datatrak): RN-1747: ↻ animation when syncing #6574

Uh oh!

jaskfla commented Dec 8, 2025

Uh oh!

gemini-code-assist bot commented Dec 8, 2025

Uh oh!

Uh oh!

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jaskfla Dec 9, 2025

Uh oh!

chris-bes Dec 11, 2025 •

edited

Loading

Uh oh!

chris-bes left a comment

Uh oh!

cursor bot Dec 11, 2025

Uh oh!

jaskfla Dec 11, 2025

Uh oh!

cursor bot Dec 11, 2025

Uh oh!

jaskfla Dec 11, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

feat(datatrak): RN-1747: ↻ animation when syncing #6574

Are you sure you want to change the base?

feat(datatrak): RN-1747: ↻ animation when syncing #6574

Uh oh!

Conversation

jaskfla commented Dec 8, 2025

Uh oh!

gemini-code-assist bot commented Dec 8, 2025

Summary of Changes

Highlights

Footnotes

Uh oh!

Uh oh!

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jaskfla Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

chris-bes Dec 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chris-bes left a comment

Choose a reason for hiding this comment

Uh oh!

cursor bot Dec 11, 2025

Choose a reason for hiding this comment

Bug: Stale closure in useCallback due to incorrect dependencies

Uh oh!

jaskfla Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

cursor bot Dec 11, 2025

Choose a reason for hiding this comment

Bug: CSS keyframe name with double-hyphen prefix may fail

Uh oh!

jaskfla Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

chris-bes Dec 11, 2025 •

edited

Loading