refactor: streamline routing and enhance dashboard skeleton

Removed the AnimatePresence component from the routing structure in App.tsx for a more straightforward implementation. Introduced a DashboardSkeleton component in dashboard.tsx to improve user experience during data loading, providing a clearer visual indication of content loading states. Updated error handling in the Dashboard to utilize a StateBanner for better user feedback. Enhanced the News component to improve error messaging with localized text. Additionally, made minor adjustments to motion components and SQL schema for download tracking.

Author: adarshaacharya

apps/desktop/src/App.tsx

@@ -1,4 +1,3 @@
-import { AnimatePresence } from "motion/react";
 import { type ReactNode, useEffect } from "react";
 import { MemoryRouter, Route, Routes, useLocation, useNavigate } from "react-router";
 import { SWRConfig } from "swr";
@@ -19,7 +18,6 @@ import { Weather } from "./features/weather/weather";
 import { ErrorBoundary } from "./shared/components/error-boundary";
 import { Header } from "./shared/components/header";
 import { HeaderSlotProvider } from "./shared/components/header-slot";
-import { PageTransition } from "./shared/components/motion";
 import { TabBar } from "./shared/components/tab-bar";
 import { SettingsProvider, useSettings } from "./shared/context/settings-context";
 import { UpdaterProvider } from "./shared/context/updater-context";
@@ -91,30 +89,28 @@ function Shell() {
     <div className="app-window flex flex-col">
       <TrayNavigation />
       <DismissOnEscape />
-      <AnimatePresence mode="wait" initial={false}>
-        <Routes location={location} key={location.pathname}>
-          {ROUTES.map((route) => (
-            <Route
-              key={route.path}
-              path={route.path}
-              element={
-                <PageTransition className="flex min-h-0 min-w-0 flex-1 flex-col">
-                  {route.path !== "/" && route.path !== "/weather" && (
-                    <Header title={t(route.titleKey)} />
-                  )}
-                  <main
-                    className={`min-w-0 flex-1 overflow-x-hidden overflow-y-auto ${
-                      route.path === "/" ? "p-3" : route.path === "/weather" ? "" : "p-2.5"
-                    }`}
-                  >
-                    <ErrorBoundary key={route.path}>{route.element}</ErrorBoundary>
-                  </main>
-                </PageTransition>
-              }
-            />
-          ))}
-        </Routes>
-      </AnimatePresence>
+      <Routes location={location}>
+        {ROUTES.map((route) => (
+          <Route
+            key={route.path}
+            path={route.path}
+            element={
+              <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+                {route.path !== "/" && route.path !== "/weather" && (
+                  <Header title={t(route.titleKey)} />
+                )}
+                <main
+                  className={`min-w-0 flex-1 overflow-x-hidden overflow-y-auto ${
+                    route.path === "/" ? "p-3" : route.path === "/weather" ? "" : "p-2.5"
+                  }`}
+                >
+                  <ErrorBoundary key={route.path}>{route.element}</ErrorBoundary>
+                </main>
+              </div>
+            }
+          />
+        ))}
+      </Routes>
       <RadioMiniPlayer />
       <TabBar />
     </div>

apps/desktop/src/features/calendar/dashboard.tsx

@@ -1,9 +1,10 @@
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useNavigate } from "react-router";
 import { Card } from "../../shared/components/card";
 import { Icon } from "../../shared/components/icon";
 import { MonthGrid } from "../../shared/components/month-grid";
-import { FadeUp, Stagger } from "../../shared/components/motion";
+import { SkeletonBlock } from "../../shared/components/skeleton";
+import { StateBanner } from "../../shared/components/state-banner";
 import { useSettings } from "../../shared/context/settings-context";
 import {
   api,
@@ -18,6 +19,38 @@ import { ClockRow } from "./_components/clock-row";
 import { DateHeader } from "./_components/date-header";
 import { GlanceCards } from "./_components/glance-cards";
 
+/**
+ * The dashboard at its own shape, before the data lands.
+ *
+ * Sized to the real layout — date header, month grid, event row, glance pair —
+ * so the popover opens at its final height instead of growing under the
+ * pointer. This screen used to render a single `…` here, which told the user
+ * nothing and then jumped.
+ */
+function DashboardSkeleton() {
+  return (
+    <div className="space-y-2.5" aria-hidden>
+      <div className="surface-card p-2.5">
+        <SkeletonBlock className="h-5 w-1/2" />
+        <SkeletonBlock className="mt-1.5 h-3 w-1/3" />
+      </div>
+      <div className="surface-card calendar-panel">
+        <SkeletonBlock className="mx-auto h-3 w-2/5" />
+        <div className="mt-2.5 grid grid-cols-7 gap-1">
+          {Array.from({ length: 42 }, (_, cell) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: fixed grid, never reordered
+            <SkeletonBlock key={cell} className="aspect-square w-full" />
+          ))}
+        </div>
+      </div>
+      <div className="grid grid-cols-2 gap-2.5">
+        <SkeletonBlock className="h-[72px] w-full rounded-[10px]" />
+        <SkeletonBlock className="h-[72px] w-full rounded-[10px]" />
+      </div>
+    </div>
+  );
+}
+
 const PROVISIONAL_YEARS = new Set([2085, 2086, 2087, 2088, 2089, 2090]);
 const GREG_MONTHS = [
   "Jan",
@@ -77,7 +110,8 @@ export function Dashboard() {
     return keys;
   }, [plans]);
 
-  useEffect(() => {
+  const reload = useCallback(() => {
+    setError(null);
     api
       .today()
       .then((value) => {
@@ -95,6 +129,8 @@ export function Dashboard() {
       .catch(() => setPlans([]));
   }, []);
 
+  useEffect(reload, [reload]);
+
   useEffect(() => {
     if (!cursor) return;
     api
@@ -126,90 +162,72 @@ export function Dashboard() {
   };
 
   if (error) {
-    return (
-      <Card title={t("state.unavailable")}>
-        <p className="text-text-secondary">{error}</p>
-      </Card>
-    );
-  }
-  if (!today || !month) {
-    return <p className="text-text-muted">…</p>;
+    return <StateBanner state={{ status: "failed", message: error }} onRetry={reload} />;
   }
+  if (!today || !month) return <DashboardSkeleton />;
 
   const provisional = cursor && PROVISIONAL_YEARS.has(cursor.year);
   const upNext = upcoming[0];
 
   return (
-    <Stagger className="space-y-2.5">
-      <FadeUp>
-        <DateHeader today={today} />
-      </FadeUp>
+    <div className="space-y-2.5">
+      <DateHeader today={today} />
 
       {modules.clocksEnabled && modules.clocks.length > 0 && (
-        <FadeUp>
-          <ClockRow timeZones={modules.clocks} />
-        </FadeUp>
+        <ClockRow timeZones={modules.clocks} />
       )}
-
-      <FadeUp>
-        <Card className="calendar-panel">
-          <div className="mb-2 flex items-center justify-between gap-2">
-            <button
-              type="button"
-              aria-label={t("calendar.previous-month")}
-              onClick={() => step(-1)}
-              className="icon-btn size-7"
-            >
-              <span className="text-[15px] leading-none">‹</span>
-            </button>
-            <span className="min-w-0 flex-1 truncate text-center text-[11px] font-semibold tracking-[0.01em] text-text-secondary">
-              {month.title}
-              {monthSpan ? ` · ${monthSpan}` : ""}
-            </span>
-            <button
-              type="button"
-              aria-label={t("calendar.next-month")}
-              onClick={() => step(1)}
-              className="icon-btn size-7"
-            >
-              <span className="text-[15px] leading-none">›</span>
-            </button>
-          </div>
-          <MonthGrid
-            month={month}
-            planDays={planDays}
-            onSelect={(day) =>
-              day.date && navigate(`/day?y=${day.date.year}&m=${day.date.month}&d=${day.date.day}`)
-            }
-          />
-          {provisional && (
-            <p className="mt-2 text-[10px] text-text-muted">{t("calendar.provisional")}</p>
-          )}
-        </Card>
-      </FadeUp>
-
-      {upNext && (
-        <FadeUp>
+      <Card className="calendar-panel">
+        <div className="mb-2 flex items-center justify-between gap-2">
           <button
             type="button"
-            onClick={() => navigate("/events")}
-            className="surface-card flex w-full items-center gap-2 px-2.5 py-2 text-left transition-transform active:scale-[0.99]"
+            aria-label={t("calendar.previous-month")}
+            onClick={() => step(-1)}
+            className="icon-btn size-7"
           >
-            <Icon
-              name="festival"
-              className="size-3.5 shrink-0 text-[color:var(--color-accent-mark)]"
-            />
-            <span className="min-w-0 flex-1 truncate text-[12px]">{upNext.name}</span>
-            <span className="shrink-0 text-[11px] text-text-muted">
-              {relativeText(upNext.days_away, t, numerals)} ›
-            </span>
+            <span className="text-[15px] leading-none">‹</span>
           </button>
-        </FadeUp>
-      )}
+          <span className="min-w-0 flex-1 truncate text-center text-[11px] font-semibold tracking-[0.01em] text-text-secondary">
+            {month.title}
+            {monthSpan ? ` · ${monthSpan}` : ""}
+          </span>
+          <button
+            type="button"
+            aria-label={t("calendar.next-month")}
+            onClick={() => step(1)}
+            className="icon-btn size-7"
+          >
+            <span className="text-[15px] leading-none">›</span>
+          </button>
+        </div>
+        <MonthGrid
+          month={month}
+          planDays={planDays}
+          onSelect={(day) =>
+            day.date && navigate(`/day?y=${day.date.year}&m=${day.date.month}&d=${day.date.day}`)
+          }
+        />
+        {provisional && (
+          <p className="mt-2 text-[10px] text-text-muted">{t("calendar.provisional")}</p>
+        )}
+      </Card>
 
-      <FadeUp>
-        <GlanceCards />
-      </FadeUp>
-    </Stagger>
+      {upNext && (
+        <button
+          type="button"
+          onClick={() => navigate("/events")}
+          className="surface-card flex w-full items-center gap-2 px-2.5 py-2 text-left transition-transform active:scale-[0.99]"
+        >
+          <Icon
+            name="festival"
+            className="size-3.5 shrink-0 text-[color:var(--color-accent-mark)]"
+          />
+          <span className="min-w-0 flex-1 truncate text-[12px]">{upNext.name}</span>
+          <span className="shrink-0 text-[11px] text-text-muted">
+            {relativeText(upNext.days_away, t, numerals)} ›
+          </span>
+        </button>
+      )}
+      <GlanceCards />
+    </div>
   );
 }

apps/desktop/src/features/news/news.tsx

@@ -163,7 +163,9 @@ export function News() {
       )}
 
       {failed.length > 0 && (
-        <p className="mt-2 text-[10px] text-text-muted">Could not reach {failed.join(", ")}.</p>
+        <p className="mt-2 text-[11px] text-text-secondary">
+          {t("news.could-not-reach").replace("{sources}", failed.join(", "))}
+        </p>
       )}
 
       {freshness && items.length > 0 && (

apps/desktop/src/i18n/en.json

@@ -388,5 +388,6 @@
   "error.render-failed-hint": "The rest of Sajilo is still working.",
   "state.failed": "Couldn't reach the source",
   "state.failed-hint": "Check your connection, then try again.",
-  "state.not-yet-hint": "This fills in the next time Sajilo refreshes."
+  "state.not-yet-hint": "This fills in the next time Sajilo refreshes.",
+  "news.could-not-reach": "Could not reach {sources}."
 }

apps/desktop/src/i18n/ne.json

@@ -388,5 +388,6 @@
   "error.render-failed-hint": "साजिलोका अरू भाग चलिरहेका छन्।",
   "state.failed": "स्रोतसम्म पुग्न सकिएन",
   "state.failed-hint": "इन्टरनेट जडान जाँचेर फेरि प्रयास गर्नुहोस्।",
-  "state.not-yet-hint": "साजिलोले अर्को पटक अद्यावधिक गर्दा देखिनेछ।"
+  "state.not-yet-hint": "साजिलोले अर्को पटक अद्यावधिक गर्दा देखिनेछ।",
+  "news.could-not-reach": "{sources} सम्म पुग्न सकिएन।"
 }

apps/desktop/src/shared/components/motion.tsx

@@ -1,33 +1,9 @@
 import { type HTMLMotionProps, motion } from "motion/react";
 import type { ReactNode } from "react";
-import { easeOut, fadeIn, fadeUp, spring, stagger, useMotionEnabled } from "../lib/motion";
+import { fadeUp, spring, stagger, useMotionEnabled } from "../lib/motion";
 
 type MotionDivProps = HTMLMotionProps<"div">;
 
-/** Route / panel enter — short fade + lift. */
-export function PageTransition({
-  children,
-  className,
-}: {
-  children: ReactNode;
-  className?: string;
-}) {
-  const enabled = useMotionEnabled();
-  if (!enabled) return <div className={className}>{children}</div>;
-
-  return (
-    <motion.div
-      className={className}
-      initial={{ opacity: 0, y: 8 }}
-      animate={{ opacity: 1, y: 0 }}
-      exit={{ opacity: 0, y: -5 }}
-      transition={{ ...spring.snappy, opacity: { duration: 0.18, ease: easeOut } }}
-    >
-      {children}
-    </motion.div>
-  );
-}
-
 /** Stagger children on mount (dashboard sections, lists). */
 export function Stagger({ children, className }: { children: ReactNode; className?: string }) {
   const enabled = useMotionEnabled();
@@ -59,21 +35,6 @@ export function FadeUp({
   );
 }
 
-export function FadeIn({ children, className }: { children: ReactNode; className?: string }) {
-  const enabled = useMotionEnabled();
-  if (!enabled) return <div className={className}>{children}</div>;
-
-  return (
-    <motion.div
-      className={className}
-      variants={fadeIn}
-      transition={{ duration: 0.2, ease: easeOut }}
-    >
-      {children}
-    </motion.div>
-  );
-}
-
 /** Interactive card / row — subtle scale on press. */
 export function Pressable({
   children,

apps/desktop/src/shared/components/skeleton.tsx

@@ -10,9 +10,7 @@
  */
 export function SkeletonBlock({ className }: { className?: string }) {
   return (
-    <div
-      className={`animate-pulse rounded bg-surface-hover${className ? ` ${className}` : ""}`}
-    />
+    <div className={`animate-pulse rounded bg-surface-hover${className ? ` ${className}` : ""}`} />
   );
 }
 

apps/desktop/src/shared/components/state-banner.tsx

@@ -53,10 +53,7 @@ export function StateBanner({
           role="status"
           className="mb-2 flex items-center gap-1.5 rounded-lg border border-[color:var(--color-accent-mark)] bg-surface px-2 py-1.5 text-[11px] text-text"
         >
-          <Icon
-            name="clock"
-            className="size-3.5 shrink-0 text-[color:var(--color-accent-mark)]"
-          />
+          <Icon name="clock" className="size-3.5 shrink-0 text-[color:var(--color-accent-mark)]" />
           <span className="min-w-0 flex-1">
             {state.since ? `${t("state.stale-since")} ${state.since}` : t("state.stale")}
           </span>