فهرست منبع

refactor(ui): replace DebouncedSkeleton with Skeleton for consistent loading UI in SearchDateRangePicker

Code_Uwe 1 هفته پیش
والد
کامیت
9bc6d1256b
1فایلهای تغییر یافته به همراه13 افزوده شده و 13 حذف شده
  1. 13 13
      components/search/form/SearchDateRangePicker.jsx

+ 13 - 13
components/search/form/SearchDateRangePicker.jsx

@@ -15,16 +15,16 @@ import {
 	PopoverContent,
 	PopoverTrigger,
 } from "@/components/ui/popover";
+import { Skeleton } from "@/components/ui/skeleton";
 
 import { useSearchDateRangePicker } from "@/lib/frontend/search/useSearchDateRangePicker";
-import { DebouncedSkeleton } from "@/components/ui/debounced-skeleton";
 
 function CalendarLoading() {
 	return (
 		<div className="space-y-3">
 			<div className="flex gap-4">
-				<DebouncedSkeleton className="h-72 w-72 rounded-md" />
-				<DebouncedSkeleton className="h-72 w-72 rounded-md" />
+				<Skeleton className="h-72 w-72" />
+				<Skeleton className="h-72 w-72" />
 			</div>
 			<p className="text-xs text-muted-foreground text-center">
 				Kalender lädt…
@@ -41,6 +41,14 @@ const Calendar = dynamic(
 	},
 );
 
+// Preset chips should look identical in light/dark.
+// We intentionally keep them "white pill" style in both modes (consistent + readable).
+const PRESET_BADGE_CLASS = [
+	"bg-white text-black border-border",
+	"hover:bg-white/90",
+	"dark:bg-white dark:text-black",
+].join(" ");
+
 export default function SearchDateRangePicker({
 	from,
 	to,
@@ -197,15 +205,7 @@ export default function SearchDateRangePicker({
 
 							<div className="flex flex-wrap gap-2">
 								{presetsRow1.map((p) => (
-									<Badge
-										key={p.key}
-										asChild
-										className={[
-											"bg-white text-black border-border",
-											"hover:bg-white/90",
-											"dark:bg-white dark:text-black",
-										].join(" ")}
-									>
+									<Badge key={p.key} asChild className={PRESET_BADGE_CLASS}>
 										<button
 											type="button"
 											className="cursor-pointer select-none disabled:opacity-60"
@@ -221,7 +221,7 @@ export default function SearchDateRangePicker({
 
 							<div className="flex flex-wrap gap-2">
 								{presetsRow2.map((p) => (
-									<Badge key={p.key} asChild>
+									<Badge key={p.key} asChild className={PRESET_BADGE_CLASS}>
 										<button
 											type="button"
 											className="cursor-pointer select-none disabled:opacity-60"