Skip to main content

SyncProgressList

The SyncProgressList component displays real-time synchronization progress for multiple health data types. It provides a comprehensive view of sync status, progress counters, and visual progress indicators for each measurement type being synchronized.

Basic Example​

import { MeasurementTypeKey } from "@ovok/core";
import { SyncProgress, SyncProgressList } from "@ovok/native";
import React from "react";

const HealthSyncScreen = () => {
  const [syncProgress, setSyncProgress] = React.useState<
    Partial<Record<MeasurementTypeKey, SyncProgress>>
  >({
    [MeasurementTypeKey.bodyWeight]: {
      measurementTypeKey: MeasurementTypeKey.bodyWeight,
      status: "completed",
      progress: {
        done: 100,
        total: 100,
      },
    },
    [MeasurementTypeKey.heartRate]: {
      measurementTypeKey: MeasurementTypeKey.heartRate,
      status: "syncing",
      progress: {
        done: 20,
        total: 100,
      },
    },
    [MeasurementTypeKey.bloodGlucose]: {
      measurementTypeKey: MeasurementTypeKey.bloodGlucose,
      status: "idle",
      progress: {
        done: 0,
        total: 0,
      },
    },
    [MeasurementTypeKey.bloodOxygenPulseRate]: {
      measurementTypeKey: MeasurementTypeKey.bloodOxygenPulseRate,
      status: "paused",
      progress: {
        done: 40,
        total: 100,
      },
    },
    [MeasurementTypeKey.restingHeartRate]: {
      measurementTypeKey: MeasurementTypeKey.restingHeartRate,
      status: "started",
      progress: {
        done: 0,
        total: 0,
      },
    },
  });

  return <SyncProgressList progress={syncProgress} />;
};

export default HealthSyncScreen;

Props​

PropTypeDefaultDescription
progressPartial<Record<MeasurementTypeKey, SyncProgress>> | null | undefinedundefinedProgress data for each measurement type being synced

Component Behavior​

Progress Data Structure​

Each measurement type progress includes:

  • Status: Current sync state (idle, started, syncing, completed, paused)
  • Progress Counters: Done and total item counts
  • Measurement Type Key: LOINC-based measurement identifier

Status Display​

  • Sync Status: Localized status text (e.g., "Syncing", "Completed", "Paused")
  • Progress Ratio: "done / total" format for clear progress indication
  • Progress Bar: Visual progress bar using the ProgressBar component

Internationalization​

  • Measurement Names: Uses tile.${measurementType}.label translation keys
  • Status Labels: Uses data-sync.status.${status} translation keys
  • Automatic Language: Updates based on user's selected language

Styling​

Theme Colors Used​

  • theme.spacing(3) - Gap between measurement type sections
  • theme.spacing(1) - Gap between status elements within each section