From 6adec62b5fa173a729fd5e8a8cad8a1ddec9ab4a Mon Sep 17 00:00:00 2001
From: Nikolay Tatarinov <me@arnike.ru>
Date: Wed, 4 Mar 2026 11:16:07 +0300
Subject: [PATCH] feat: enhance CurrentDutyView with loading skeletons and
 improved localization

- Added Skeleton components to CurrentDutyView for better loading state representation.
- Updated localization messages to include new labels for remaining time display.
- Refactored remaining time display logic for clarity and improved user experience.
---
 .../current-duty/CurrentDutyView.tsx          | 70 +++++++++++++------
 webapp-next/src/i18n/messages.ts              |  4 ++
 webapp-next/src/lib/current-duty.test.ts      |  2 +-
 3 files changed, 55 insertions(+), 21 deletions(-)

diff --git a/webapp-next/src/components/current-duty/CurrentDutyView.tsx b/webapp-next/src/components/current-duty/CurrentDutyView.tsx
index d8c8117..f043eb6 100644
--- a/webapp-next/src/components/current-duty/CurrentDutyView.tsx
+++ b/webapp-next/src/components/current-duty/CurrentDutyView.tsx
@@ -29,6 +29,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
 import type { DutyWithUser } from "@/types";
 
 export interface CurrentDutyViewProps {
@@ -164,14 +165,33 @@ export function CurrentDutyView({ onBack, openedFromPin = false }: CurrentDutyVi
         aria-live="polite"
         aria-label={t("loading")}
       >
-        <span
-          className="block size-8 shrink-0 rounded-full border-2 border-transparent border-t-accent motion-reduce:animate-none animate-spin"
-          aria-hidden
-        />
-        <p className="text-muted-foreground m-0">{t("loading")}</p>
-        <Button variant="outline" onClick={handlePrimaryAction} aria-label={primaryButtonAriaLabel}>
-          {primaryButtonLabel}
-        </Button>
+        <Card className="current-duty-card w-full max-w-[var(--max-width-app)] border-t-4 border-t-duty">
+          <CardHeader>
+            <div className="flex items-center gap-2">
+              <Skeleton className="size-2.5 shrink-0 rounded-full" />
+              <Skeleton className="h-5 w-32" />
+            </div>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-4 pt-1">
+            <div className="flex flex-col gap-2">
+              <Skeleton className="h-6 w-48" />
+              <Skeleton className="h-4 w-full max-w-[280px]" />
+            </div>
+            <Skeleton className="h-14 w-full rounded-lg" />
+            <div className="flex flex-col gap-2 border-t border-border/50 pt-4">
+              <Skeleton className="h-12 w-full rounded-md" />
+              <Skeleton className="h-12 w-full rounded-md" />
+            </div>
+          </CardContent>
+          <CardFooter>
+            <Button
+              onClick={handlePrimaryAction}
+              aria-label={primaryButtonAriaLabel}
+            >
+              {primaryButtonLabel}
+            </Button>
+          </CardFooter>
+        </Card>
       </div>
     );
   }
@@ -244,11 +264,10 @@ export function CurrentDutyView({ onBack, openedFromPin = false }: CurrentDutyVi
   const endTime = formatHHMM(duty.end_at);
   const shiftStr = `${startDDMM} ${startTime} — ${endDDMM} ${endTime}`;
   const rem = remaining ?? getRemainingTime(duty.end_at);
-  const remainingStr = t("current_duty.remaining", {
+  const remainingValueStr = t("current_duty.remaining_value", {
     hours: String(rem.hours),
     minutes: String(rem.minutes),
   });
-  const endsAtStr = t("current_duty.ends_at", { time: endTime });
 
   const displayTz =
     typeof window !== "undefined" &&
@@ -280,21 +299,31 @@ export function CurrentDutyView({ onBack, openedFromPin = false }: CurrentDutyVi
             {t("current_duty.title")}
           </CardTitle>
         </CardHeader>
-        <CardContent className="flex flex-col gap-3">
-          <p className="font-medium text-foreground" id="current-duty-name">
-            {duty.full_name}
-          </p>
-          <p className="text-sm text-muted-foreground">
-            {shiftLabel} {shiftStr}
-          </p>
+        <CardContent className="flex flex-col gap-4 pt-1">
+          <section className="flex flex-col gap-2" aria-label={t("current_duty.shift")}>
+            <p
+              className="text-lg font-semibold text-foreground leading-tight"
+              id="current-duty-name"
+            >
+              {duty.full_name}
+            </p>
+            <p className="text-sm text-muted-foreground break-words">
+              {shiftLabel} {shiftStr}
+            </p>
+          </section>
           <div
-            className="rounded-lg bg-duty/10 px-3 py-2 text-sm font-medium text-foreground"
+            className="rounded-lg bg-duty/10 px-3 py-2.5 flex flex-col gap-0.5"
             aria-live="polite"
             aria-atomic="true"
           >
-            {remainingStr}
+            <span className="text-xs text-muted-foreground">
+              {t("current_duty.remaining_label")}
+            </span>
+            <span className="text-base font-semibold text-foreground tabular-nums">
+              {remainingValueStr}
+            </span>
           </div>
-          <p className="text-sm text-muted-foreground">{endsAtStr}</p>
+          <section className="flex flex-col gap-2 border-t border-border/50 pt-4" aria-label={t("contact.label")}>
           {hasContacts ? (
             <ContactLinks
               phone={duty.phone}
@@ -308,6 +337,7 @@ export function CurrentDutyView({ onBack, openedFromPin = false }: CurrentDutyVi
               {t("current_duty.contact_info_not_set")}
             </p>
           )}
+          </section>
         </CardContent>
         <CardFooter>
           <Button
diff --git a/webapp-next/src/i18n/messages.ts b/webapp-next/src/i18n/messages.ts
index 46d84e7..57f97e8 100644
--- a/webapp-next/src/i18n/messages.ts
+++ b/webapp-next/src/i18n/messages.ts
@@ -67,6 +67,8 @@ export const MESSAGES: Record<Lang, Record<string, string>> = {
     "current_duty.shift_tz": "Shift ({tz}):",
     "current_duty.shift_local": "Shift (your time):",
     "current_duty.remaining": "Remaining: {hours}h {minutes}min",
+    "current_duty.remaining_label": "Remaining",
+    "current_duty.remaining_value": "{hours}h {minutes}min",
     "current_duty.ends_at": "Until end of shift at {time}",
     "current_duty.back": "Back to calendar",
     "current_duty.close": "Close",
@@ -140,6 +142,8 @@ export const MESSAGES: Record<Lang, Record<string, string>> = {
     "current_duty.shift_tz": "Смена ({tz}):",
     "current_duty.shift_local": "Смена (ваше время):",
     "current_duty.remaining": "Осталось: {hours}ч {minutes}мин",
+    "current_duty.remaining_label": "Осталось",
+    "current_duty.remaining_value": "{hours}ч {minutes}мин",
     "current_duty.ends_at": "До конца смены в {time}",
     "current_duty.back": "Назад к календарю",
     "current_duty.close": "Закрыть",
diff --git a/webapp-next/src/lib/current-duty.test.ts b/webapp-next/src/lib/current-duty.test.ts
index 2a81850..61b2748 100644
--- a/webapp-next/src/lib/current-duty.test.ts
+++ b/webapp-next/src/lib/current-duty.test.ts
@@ -3,7 +3,7 @@
  * Ported from webapp/js/currentDuty.test.js.
  */
 
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { describe, it, expect, vi } from "vitest";
 import { getRemainingTime, findCurrentDuty } from "./current-duty";
 import type { DutyWithUser } from "@/types";