fix(header): show sync activity only while a job is actually running

The header's sync indicator spun "fetching history" whenever any channel
still lacked full history — i.e. perpetually, even when the scheduler was
idle between its periodic runs. It now spins only while a channel-sync job
(backfill or RSS poll) is actually running; otherwise pending deep-history
work shows as the calm, static "N without full history" link, and recent
work queued for the next run shows a static "N queued". This makes the
header coherent with the Scheduler dashboard's live state.

Backend exposes running_job_ids() from the scheduler activity and a derived
sync_active flag on /api/sync/my-status.
This commit is contained in:
npeter83 2026-06-19 02:57:45 +02:00
parent a004fa4107
commit f69e34e3a6
7 changed files with 48 additions and 18 deletions

View file

@ -1,6 +1,6 @@
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useTranslation } from "react-i18next";
import { Database, History, Loader2, Pause, Play } from "lucide-react";
import { Clock, Database, History, Loader2, Pause, Play } from "lucide-react";
import { api } from "../lib/api";
import { formatViews } from "../lib/format";
import Tooltip from "./Tooltip";
@ -38,6 +38,10 @@ export default function SyncStatus({
const syncing = data.channels_recent_pending;
const notFull = data.channels_deep_pending; // your channels without full history yet
// Spin only while a sync job is actually running; otherwise pending work shows as a calm,
// static state (or, for deep history, just the "N without full history" link below).
const active = data.sync_active;
const showMain = data.paused || active || syncing > 0 || notFull === 0;
return (
<div className="hidden lg:flex items-center gap-2 text-xs text-muted">
@ -54,23 +58,31 @@ export default function SyncStatus({
</span>
</span>
</Tooltip>
<span className="opacity-40">·</span>
{data.paused ? (
<span className="text-accent font-medium">{t("header.sync.paused")}</span>
) : syncing > 0 ? (
<span className="flex items-center gap-1">
<Loader2 className="w-3.5 h-3.5 animate-spin" />
{t("header.sync.syncing", { count: syncing })}
</span>
) : notFull > 0 ? (
// Recent uploads are in, but the scheduler is still backfilling full history —
// so "all synced" would be misleading. Reflect the deep work as active.
<span className="flex items-center gap-1">
<Loader2 className="w-3.5 h-3.5 animate-spin" />
{t("header.sync.backfillingHistory")}
</span>
) : (
<span>{t("header.sync.allSynced")}</span>
{showMain && (
<>
<span className="opacity-40">·</span>
{data.paused ? (
<span className="text-accent font-medium">{t("header.sync.paused")}</span>
) : active ? (
// A sync job is running right now — spin and name what it's doing.
<span className="flex items-center gap-1">
<Loader2 className="w-3.5 h-3.5 animate-spin" />
{syncing > 0
? t("header.sync.syncing", { count: syncing })
: notFull > 0
? t("header.sync.backfillingHistory")
: t("header.sync.working")}
</span>
) : syncing > 0 ? (
// Recent uploads queued for the next run, but nothing running now — static.
<span className="flex items-center gap-1">
<Clock className="w-3.5 h-3.5" />
{t("header.sync.recentQueued", { count: syncing })}
</span>
) : (
<span>{t("header.sync.allSynced")}</span>
)}
</>
)}
{notFull > 0 && (
<>