feat: build production-ready wtr weather PWA

components/states/loading-skeleton.tsx

@@ -0,0 +1,16 @@
+import { cn } from "@/lib/utils";
+
+export function LoadingSkeleton({ className = "" }: { className?: string }) {
+  return <div className={cn("animate-pulse rounded-[1.75rem] bg-white/40 dark:bg-white/10", className)} aria-label="Ładowanie danych" />;
+}
+
+export function PageLoadingSkeleton() {
+  return (
+    <div className="space-y-5" aria-busy="true">
+      <LoadingSkeleton className="h-[25rem]" />
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {Array.from({ length: 4 }, (_, index) => <LoadingSkeleton className="h-36" key={index} />)}
+      </div>
+    </div>
+  );
+}