diff --git a/docs/releases.md b/docs/releases.md index 26e0f744..1e9d749b 100644 --- a/docs/releases.md +++ b/docs/releases.md @@ -1987,8 +1987,8 @@ and the [ntfy Android app](https://github.com/binwiederhier/ntfy-android/release **Bug fixes + maintenance:** -* `GET /account` now reads from the primary database instead of a read replica, so the account view no longer shows stale data right after a change when replicas lag behind -* The web app no longer issues a redundant second `GET /account` after email actions (e.g. setting a primary email); it relies on the sync-topic event for the refresh +* Web app: Smooth transitions and loading animation, remove flickering +* Web app: `GET /account` now reads from the primary database instead of a read replica, so the account view no longer shows stale data right after a change when replicas lag behind ### ntfy Android v1.25.x (UNRELEASED) diff --git a/web/index.html b/web/index.html index 462bbc1f..c714263c 100644 --- a/web/index.html +++ b/web/index.html @@ -14,7 +14,7 @@ - + @@ -44,6 +44,85 @@ + + + + + + + + +
diff --git a/web/public/static/images/mask-icon.svg b/web/public/static/images/ntfy-mask.svg similarity index 100% rename from web/public/static/images/mask-icon.svg rename to web/public/static/images/ntfy-mask.svg diff --git a/web/public/static/images/ntfy-splash.svg b/web/public/static/images/ntfy-splash.svg new file mode 100644 index 00000000..a2815598 --- /dev/null +++ b/web/public/static/images/ntfy-splash.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/web/src/app/Prefs.js b/web/src/app/Prefs.js index 4f28f87e..e77fd3cb 100644 --- a/web/src/app/Prefs.js +++ b/web/src/app/Prefs.js @@ -6,6 +6,15 @@ export const THEME = { SYSTEM: "system", }; +// Default values the getters return when a pref is unset; also used by PrefCache (PrefCache.jsx). +export const PREF_DEFAULTS = { + sound: "ding", + minPriority: 1, + deleteAfter: 604800, // one week + theme: THEME.SYSTEM, + webPushEnabled: false, +}; + class Prefs { constructor(dbImpl) { this.db = dbImpl; @@ -17,7 +26,7 @@ class Prefs { async sound() { const sound = await this.db.prefs.get("sound"); - return sound ? sound.value : "ding"; + return sound ? sound.value : PREF_DEFAULTS.sound; } async setMinPriority(minPriority) { @@ -26,7 +35,7 @@ class Prefs { async minPriority() { const minPriority = await this.db.prefs.get("minPriority"); - return minPriority ? Number(minPriority.value) : 1; + return minPriority ? Number(minPriority.value) : PREF_DEFAULTS.minPriority; } async setDeleteAfter(deleteAfter) { @@ -35,12 +44,12 @@ class Prefs { async deleteAfter() { const deleteAfter = await this.db.prefs.get("deleteAfter"); - return deleteAfter ? Number(deleteAfter.value) : 604800; // Default is one week + return deleteAfter ? Number(deleteAfter.value) : PREF_DEFAULTS.deleteAfter; } async webPushEnabled() { const webPushEnabled = await this.db.prefs.get("webPushEnabled"); - return webPushEnabled?.value; + return webPushEnabled?.value ?? PREF_DEFAULTS.webPushEnabled; } async setWebPushEnabled(enabled) { @@ -49,7 +58,7 @@ class Prefs { async theme() { const theme = await this.db.prefs.get("theme"); - return theme?.value ?? THEME.SYSTEM; + return theme?.value ?? PREF_DEFAULTS.theme; } async setTheme(mode) { diff --git a/web/src/app/Session.js b/web/src/app/Session.js index 976e9f3c..8db620e7 100644 --- a/web/src/app/Session.js +++ b/web/src/app/Session.js @@ -1,4 +1,5 @@ import Dexie from "dexie"; +import { fadeOut } from "./transition"; /** * Manages the logged-in user's session and access token. @@ -42,7 +43,12 @@ class Session { localStorage.setItem("token", token); } - async resetAndRedirect(url) { + async resetAndRedirect(url, { fade = false } = {}) { + // User-initiated exits (logout, account deletion) fade out first, while data's intact, so the + // wipe + reload doesn't flash a broken UI. Error redirects pass no options and cut straight through. + if (fade) { + await fadeOut(); + } await this.db.delete(); localStorage.removeItem("user"); localStorage.removeItem("token"); diff --git a/web/src/app/notificationUtils.js b/web/src/app/notificationUtils.js index 2453075a..0fb1ef96 100644 --- a/web/src/app/notificationUtils.js +++ b/web/src/app/notificationUtils.js @@ -49,7 +49,7 @@ export const isImage = (attachment) => { }; export const icon = "/static/images/ntfy.png"; -export const badge = "/static/images/mask-icon.svg"; +export const badge = "/static/images/ntfy-mask.svg"; /** * Computes a unique notification tag scoped by baseUrl, topic, and sequence ID. diff --git a/web/src/app/splash.js b/web/src/app/splash.js new file mode 100644 index 00000000..55988cf4 --- /dev/null +++ b/web/src/app/splash.js @@ -0,0 +1,58 @@ +// Fades out and removes the static splash (see web/index.html), called once the app has mounted and +// its data is ready. Idempotent. + +// Minimum time the splash stays up, so it doesn't flash-and-vanish on warm-cache loads. +const MIN_VISIBLE_MS = 1000; + +// Hide in two phases: fade the logo out, then fade the background away to reveal the app. +// APP_FADE_MS must match the #splash opacity transition in index.html. +const LOGO_FADE_MS = 300; +const APP_FADE_MS = 100; + +let removed = false; + +const fadeOutAndRemove = () => { + const splash = document.getElementById("splash"); + if (!splash) { + return; + } + + // Phase 1: freeze the pulse at its current opacity (else stopping the animation snaps to full), + // then fade the logo to 0. + const img = splash.querySelector("img"); + if (img) { + const current = getComputedStyle(img).opacity; + img.style.opacity = current; + img.style.animation = "none"; + img.getBoundingClientRect(); // force reflow so the fade starts from `current` + img.style.transition = `opacity ${LOGO_FADE_MS}ms ease-out`; + img.style.opacity = "0"; + } + + // Phase 2: lift the background to fade the app in, then remove the node. + setTimeout(() => { + splash.classList.add("splash-hidden"); + const remove = () => splash.remove(); + // Ignore the logo's bubbling transitionend; only the background's own fade should remove it. + const onEnd = (event) => { + if (event.target === splash) { + splash.removeEventListener("transitionend", onEnd); + remove(); + } + }; + splash.addEventListener("transitionend", onEnd); + setTimeout(remove, APP_FADE_MS + 100); // fallback if transitionend never fires + }, LOGO_FADE_MS); +}; + +const hideSplash = () => { + if (removed) { + return; + } + removed = true; + // performance.now() ~= how long the splash has been visible; hold until MIN_VISIBLE_MS elapses. + const remaining = Math.max(0, MIN_VISIBLE_MS - performance.now()); + setTimeout(fadeOutAndRemove, remaining); +}; + +export default hideSplash; diff --git a/web/src/app/transition.js b/web/src/app/transition.js new file mode 100644 index 00000000..a9d5d0df --- /dev/null +++ b/web/src/app/transition.js @@ -0,0 +1,49 @@ +// Fade transitions between the app and the auth pages (login/signup/reset): fade #root out, then +// navigate client-side (fading back in) or full-reload (the splash fades the next page in). + +const FADE_MS = 150; +const rootNode = () => document.getElementById("root"); + +// Fade #root out, resolving when done. Exported so callers can await it before their own +// teardown + reload (e.g. resetAndRedirect wiping IndexedDB). +export const fadeOut = () => + new Promise((resolve) => { + const node = rootNode(); + if (!node) { + resolve(); + return; + } + node.style.transition = `opacity ${FADE_MS}ms ease-out`; + node.style.opacity = "0"; + setTimeout(resolve, FADE_MS); + }); + +// Fade #root back in, then strip the inline styles (a lingering `transition` would animate future +// opacity changes). setTimeout, not rAF, so a backgrounded tab can't strand #root at opacity 0. +const fadeInRoot = () => { + const node = rootNode(); + if (!node) { + return; + } + node.style.opacity = "1"; + setTimeout(() => { + node.style.transition = ""; + node.style.opacity = ""; + }, FADE_MS); +}; + +// Fade out, navigate client-side, fade the new page in (app -> login/signup, no reload). +export const fadeNavigate = (navigate, to) => { + fadeOut().then(() => { + navigate(to); + fadeInRoot(); + }); +}; + +// Fade out, then full-reload to `url` (login/signup -> app needs a reload for the per-user DB). +// The splash fades it back in. +export const fadeReload = (url) => { + fadeOut().then(() => { + window.location.href = url; + }); +}; diff --git a/web/src/components/Account.jsx b/web/src/components/Account.jsx index 3369e68e..be0a4a51 100644 --- a/web/src/components/Account.jsx +++ b/web/src/components/Account.jsx @@ -191,7 +191,7 @@ const ChangePasswordDialog = (props) => { }; return ( - + {t("account_basics_password_dialog_title")} { }; return ( - + {t("account_basics_phone_numbers_dialog_title")} {t("account_basics_phone_numbers_dialog_description")} @@ -1396,7 +1396,7 @@ const DeleteAccountDialog = (props) => { await accountApi.delete(password); await db().delete(); console.debug(`[Account] Account deleted`); - await session.resetAndRedirect(routes.app); + await session.resetAndRedirect(routes.app, { fade: true }); } catch (e) { console.log(`[Account] Error deleting account`, e); if (e instanceof IncorrectPasswordError) { diff --git a/web/src/components/ActionBar.jsx b/web/src/components/ActionBar.jsx index baef18c5..13483f9c 100644 --- a/web/src/components/ActionBar.jsx +++ b/web/src/components/ActionBar.jsx @@ -18,6 +18,7 @@ import subscriptionManager from "../app/SubscriptionManager"; import routes from "./routes"; import db from "../app/db"; import { topicDisplayName } from "../app/utils"; +import { fadeNavigate } from "../app/transition"; import Navigation from "./Navigation"; import accountApi from "../app/AccountApi"; import PopupMenu from "./PopupMenu"; @@ -172,7 +173,7 @@ const ProfileIcon = () => { await accountApi.logout(); await db().delete(); } finally { - await session.resetAndRedirect(routes.app); + await session.resetAndRedirect(routes.app, { fade: true }); } }; @@ -184,12 +185,23 @@ const ProfileIcon = () => { )} {!session.exists() && config.enable_login && ( - )} {!session.exists() && config.enable_signup && ( - )} diff --git a/web/src/components/App.jsx b/web/src/components/App.jsx index b6893f20..a68d56f7 100644 --- a/web/src/components/App.jsx +++ b/web/src/components/App.jsx @@ -28,6 +28,8 @@ import prefs from "../app/Prefs"; import RTLCacheProvider from "./RTLCacheProvider"; import session from "../app/Session"; import AccountContext from "./AccountContext"; +import { PrefCacheProvider } from "./PrefCache"; +import hideSplash from "../app/splash"; initI18n(); @@ -38,16 +40,29 @@ const App = () => { const accountMemo = useMemo(() => ({ account, setAccount }), [account, setAccount]); const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)"); const themePreference = useLiveQuery(() => prefs.theme()); - const theme = React.useMemo( - () => createTheme({ ...(darkModeEnabled(prefersDarkMode, themePreference) ? darkTheme : lightTheme), direction: languageDir }), - [prefersDarkMode, themePreference, languageDir] - ); + const isDark = darkModeEnabled(prefersDarkMode, themePreference); + const theme = React.useMemo(() => createTheme({ ...(isDark ? darkTheme : lightTheme), direction: languageDir }), [isDark, languageDir]); useEffect(() => { document.documentElement.setAttribute("lang", getKebabCaseLangStr(i18n.language)); document.dir = languageDir; }, [i18n.language, languageDir]); + // Keep the background in sync with the theme once loaded. The splash script sets the + // initial class; don't override it while the preference is still loading. + useEffect(() => { + if (themePreference === undefined) { + return; + } + document.documentElement.classList.toggle("dark", isDark); + }, [isDark, themePreference]); + + // Safety net: hide the splash even if no route does (e.g. an unmatched path). + useEffect(() => { + const timer = setTimeout(() => hideSplash(), 3000); + return () => clearTimeout(timer); + }, []); + useEffect(() => { if (!session.exists() && config.require_login && window.location.pathname !== routes.login) { window.location.href = routes.login; @@ -63,11 +78,13 @@ const App = () => { - } /> - } /> - } /> - } /> - } /> + }> + } /> + } /> + } /> + } /> + } /> + }> } /> } /> @@ -91,6 +108,12 @@ const updateTitle = (newNotificationsCount) => { updateFavicon(newNotificationsCount); }; +// Auth pages render synchronously, so the splash can be removed on mount. +const AuthLayout = () => { + useEffect(() => hideSplash(), []); + return ; +}; + const Layout = () => { const params = useParams(); const { account, setAccount } = useContext(AccountContext); @@ -98,6 +121,9 @@ const Layout = () => { const [sendDialogOpenMode, setSendDialogOpenMode] = useState(""); const users = useLiveQuery(() => userManager.all()); const subscriptions = useLiveQuery(() => subscriptionManager.all()); + // Preloaded here so the All view (and single topics, via filter) have data on mount -- no empty + // frame when switching. + const allNotifications = useLiveQuery(() => subscriptionManager.getAllNotifications()); const webPushTopics = useWebPushTopics(); const subscriptionsWithoutInternal = subscriptions?.filter((s) => !s.internal); const newNotificationsCount = subscriptionsWithoutInternal?.reduce((prev, cur) => prev + cur.new, 0) || 0; @@ -112,27 +138,37 @@ const Layout = () => { useBackgroundProcesses(); useEffect(() => updateTitle(newNotificationsCount), [newNotificationsCount]); + // Hide the splash only once subscriptions have loaded, so the nav/list don't pop in empty-then-filled. + useEffect(() => { + if (subscriptions !== undefined) { + hideSplash(); + } + }, [subscriptions]); + return ( - - setMobileDrawerOpen(!mobileDrawerOpen)} /> - setMobileDrawerOpen(!mobileDrawerOpen)} - onPublishMessageClick={() => setSendDialogOpenMode(PublishDialog.OPEN_MODE_DEFAULT)} - /> -
- - + + setMobileDrawerOpen(!mobileDrawerOpen)} /> + setMobileDrawerOpen(!mobileDrawerOpen)} + onPublishMessageClick={() => setSendDialogOpenMode(PublishDialog.OPEN_MODE_DEFAULT)} /> -
- - +
+ + +
+ + + ); }; diff --git a/web/src/components/AvatarBox.jsx b/web/src/components/AvatarBox.jsx index d924a1c3..9f11f912 100644 --- a/web/src/components/AvatarBox.jsx +++ b/web/src/components/AvatarBox.jsx @@ -1,8 +1,9 @@ import * as React from "react"; import { Avatar, Box, styled } from "@mui/material"; -import { NavLink } from "react-router-dom"; +import { useNavigate } from "react-router-dom"; import logo from "../img/ntfy-filled.svg"; import routes from "./routes"; +import { fadeNavigate } from "../app/transition"; const AvatarBoxContainer = styled(Box)` display: flex; @@ -16,11 +17,26 @@ const AvatarBoxContainer = styled(Box)` margin: auto; `; const AvatarBox = (props) => { + const navigate = useNavigate(); const avatar = ; + // Fade back to the app instead of a hard cut. Let modifier-clicks (open in new tab, etc.) through. + const handleLogoClick = (ev) => { + if (ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.altKey) { + return; + } + ev.preventDefault(); + fadeNavigate(navigate, routes.app); + }; return ( {/* The logo links back to the app, unless login is forced (no app to go back to without signing in) */} - {config.require_login ? avatar : {avatar}} + {config.require_login ? ( + avatar + ) : ( + + {avatar} + + )} {props.children} ); diff --git a/web/src/components/Login.jsx b/web/src/components/Login.jsx index 31b61cd7..18eec626 100644 --- a/web/src/components/Login.jsx +++ b/web/src/components/Login.jsx @@ -11,6 +11,7 @@ import AvatarBox from "./AvatarBox"; import session from "../app/Session"; import routes from "./routes"; import { UnauthorizedError } from "../app/errors"; +import { fadeReload } from "../app/transition"; const Login = () => { const { t } = useTranslation(); @@ -26,7 +27,7 @@ const Login = () => { const token = await accountApi.login(user); console.log(`[Login] User auth for user ${user.username} successful, token is ${token}`); await session.store(user.username, token); - window.location.href = routes.app; + fadeReload(routes.app); } catch (e) { console.log(`[Login] User auth for user ${user.username} failed`, e); if (e instanceof UnauthorizedError) { diff --git a/web/src/components/Notifications.jsx b/web/src/components/Notifications.jsx index fa3050fa..37c7b270 100644 --- a/web/src/components/Notifications.jsx +++ b/web/src/components/Notifications.jsx @@ -17,10 +17,9 @@ import { Button, } from "@mui/material"; import * as React from "react"; -import { Suspense, lazy, useEffect, useState } from "react"; +import { Suspense, lazy, useEffect, useMemo, useState } from "react"; import CheckIcon from "@mui/icons-material/Check"; import CloseIcon from "@mui/icons-material/Close"; -import { useLiveQuery } from "dexie-react-hooks"; import InfiniteScroll from "react-infinite-scroll-component"; import { Trans, useTranslation } from "react-i18next"; import { useOutletContext } from "react-router-dom"; @@ -55,28 +54,25 @@ const priorityFiles = { }; export const AllSubscriptions = () => { - const { subscriptions } = useOutletContext(); - if (!subscriptions) { - return ; + // allNotifications is preloaded in Layout, so this view has its data on mount (no empty frame on switch). + const { subscriptions, allNotifications } = useOutletContext(); + if (!subscriptions || allNotifications === null || allNotifications === undefined) { + return ; } - return ; + return ; }; export const SingleSubscription = () => { - const { subscriptions, selected } = useOutletContext(); + const { subscriptions, selected, allNotifications } = useOutletContext(); useAutoSubscribe(subscriptions, selected); - if (!selected) { - return ; + if (!selected || allNotifications === null || allNotifications === undefined) { + return ; } - return ; + return ; }; const AllSubscriptionsList = (props) => { - const { subscriptions } = props; - const notifications = useLiveQuery(() => subscriptionManager.getAllNotifications(), []); - if (notifications === null || notifications === undefined) { - return ; - } + const { subscriptions, notifications } = props; if (subscriptions.length === 0) { return ; } @@ -87,11 +83,13 @@ const AllSubscriptionsList = (props) => { }; const SingleSubscriptionList = (props) => { - const { subscription } = props; - const notifications = useLiveQuery(() => subscriptionManager.getNotifications(subscription.id), [subscription]); - if (notifications === null || notifications === undefined) { - return ; - } + const { subscription, allNotifications } = props; + // Filter the preloaded allNotifications instead of a per-topic query (getNotifications(id) == + // getAllNotifications() filtered by id), so topic switches are instant. + const notifications = useMemo( + () => allNotifications.filter((notification) => notification.subscriptionId === subscription.id), + [allNotifications, subscription.id] + ); if (notifications.length === 0) { return ; } @@ -669,3 +667,14 @@ const Loading = () => { ); }; + +// Render nothing until a load takes at least `delayMs`, so the centered spinner only shows on +// genuinely slow loads -- normal sub-frame IndexedDB reads don't flash it on every remount. +const DeferredLoading = ({ delayMs = 250 }) => { + const [show, setShow] = useState(false); + useEffect(() => { + const timer = setTimeout(() => setShow(true), delayMs); + return () => clearTimeout(timer); + }, [delayMs]); + return show ? : null; +}; diff --git a/web/src/components/PrefCache.jsx b/web/src/components/PrefCache.jsx new file mode 100644 index 00000000..09c491af --- /dev/null +++ b/web/src/components/PrefCache.jsx @@ -0,0 +1,54 @@ +import * as React from "react"; +import { createContext, useContext, useEffect } from "react"; +import { useLiveQuery } from "dexie-react-hooks"; +import prefs, { PREF_DEFAULTS } from "../app/Prefs"; + +// A CACHE of the user's prefs -- not the source of truth (that's the `prefs` IndexedDB table, via +// Prefs.js). Preloaded once in Layout so Settings renders instantly, and written through to +// localStorage on every change so (a) Settings is instant even on a cold load and (b) the inline +// splash script in index.html can read the theme synchronously before the bundle loads. The +// "prefcache" key is duplicated in that script -- keep them in sync. +const PREFCACHE_LOCALSTORAGE_KEY = "prefcache"; + +const PrefCacheContext = createContext(undefined); + +// Synchronous fallback before the live query resolves. Merged over PREF_DEFAULTS so a newly-added +// pref still has a value. +const readPersistedCache = () => { + try { + const raw = localStorage.getItem(PREFCACHE_LOCALSTORAGE_KEY); + if (raw) { + return { ...PREF_DEFAULTS, ...JSON.parse(raw) }; + } + } catch (e) { + // malformed or unavailable storage -- fall back to defaults + } + return PREF_DEFAULTS; +}; + +export const PrefCacheProvider = ({ children }) => { + const cache = useLiveQuery(async () => ({ + sound: await prefs.sound(), + minPriority: await prefs.minPriority(), + deleteAfter: await prefs.deleteAfter(), + theme: await prefs.theme(), + webPushEnabled: await prefs.webPushEnabled(), + })); + + // Write through to localStorage on change (prefs change rarely). + useEffect(() => { + if (cache !== undefined) { + try { + localStorage.setItem(PREFCACHE_LOCALSTORAGE_KEY, JSON.stringify(cache)); + } catch (e) { + // localStorage may be unavailable (private mode) -- the cache just isn't persisted + } + } + }, [cache]); + + return {children}; +}; + +// Live context once resolved; else the synchronous localStorage snapshot (instant on cold load); +// else defaults. +export const usePrefCache = () => useContext(PrefCacheContext) ?? readPersistedCache(); diff --git a/web/src/components/Preferences.jsx b/web/src/components/Preferences.jsx index b23e2713..6b5f3e03 100644 --- a/web/src/components/Preferences.jsx +++ b/web/src/components/Preferences.jsx @@ -50,6 +50,7 @@ import { UnauthorizedError } from "../app/errors"; import { subscribeTopic } from "./SubscribeDialog"; import notifier from "../app/Notifier"; import { useIsLaunchedPWA, useNotificationPermissionListener } from "./hooks"; +import { usePrefCache } from "./PrefCache"; const maybeUpdateAccountSettings = async (payload) => { if (!session.exists()) { @@ -99,7 +100,7 @@ const Notifications = () => { const Sound = () => { const { t } = useTranslation(); const labelId = "prefSound"; - const sound = useLiveQuery(async () => prefs.sound()); + const { sound } = usePrefCache(); const handleChange = async (ev) => { await prefs.setSound(ev.target.value); await maybeUpdateAccountSettings({ @@ -108,9 +109,6 @@ const Sound = () => { }, }); }; - if (!sound) { - return null; // While loading - } let description; if (sound === "none") { description = t("prefs_notifications_sound_description_none"); @@ -143,7 +141,7 @@ const Sound = () => { const MinPriority = () => { const { t } = useTranslation(); const labelId = "prefMinPriority"; - const minPriority = useLiveQuery(async () => prefs.minPriority()); + const { minPriority } = usePrefCache(); const handleChange = async (ev) => { await prefs.setMinPriority(ev.target.value); await maybeUpdateAccountSettings({ @@ -152,9 +150,6 @@ const MinPriority = () => { }, }); }; - if (!minPriority) { - return null; // While loading - } const priorities = { 1: t("priority_min"), 2: t("priority_low"), @@ -191,7 +186,7 @@ const MinPriority = () => { const DeleteAfter = () => { const { t } = useTranslation(); const labelId = "prefDeleteAfter"; - const deleteAfter = useLiveQuery(async () => prefs.deleteAfter()); + const { deleteAfter } = usePrefCache(); const handleChange = async (ev) => { await prefs.setDeleteAfter(ev.target.value); await maybeUpdateAccountSettings({ @@ -201,11 +196,6 @@ const DeleteAfter = () => { }); }; - if (deleteAfter === null || deleteAfter === undefined) { - // !deleteAfter will not work with "0" - return null; // While loading - } - const description = (() => { switch (deleteAfter) { case 0: @@ -241,7 +231,7 @@ const DeleteAfter = () => { const Theme = () => { const { t } = useTranslation(); const labelId = "prefTheme"; - const theme = useLiveQuery(async () => prefs.theme()); + const { theme } = usePrefCache(); const handleChange = async (ev) => { await prefs.setTheme(ev.target.value); }; @@ -249,7 +239,7 @@ const Theme = () => { return ( - {t("prefs_appearance_theme_system")} {t("prefs_appearance_theme_dark")} {t("prefs_appearance_theme_light")} @@ -262,7 +252,7 @@ const Theme = () => { const WebPushEnabled = () => { const { t } = useTranslation(); const labelId = "prefWebPushEnabled"; - const enabled = useLiveQuery(async () => prefs.webPushEnabled()); + const { webPushEnabled: enabled } = usePrefCache(); const handleChange = async (ev) => { await prefs.setWebPushEnabled(ev.target.value); }; diff --git a/web/src/components/PublishDialog.jsx b/web/src/components/PublishDialog.jsx index aaa4e4ed..18844b65 100644 --- a/web/src/components/PublishDialog.jsx +++ b/web/src/components/PublishDialog.jsx @@ -292,7 +292,7 @@ const PublishDialog = (props) => { return ( <> {dropZone && } - + {baseUrl && topic ? t("publish_dialog_title_topic", { diff --git a/web/src/components/Signup.jsx b/web/src/components/Signup.jsx index ced9f7f5..81379d5b 100644 --- a/web/src/components/Signup.jsx +++ b/web/src/components/Signup.jsx @@ -11,6 +11,7 @@ import AvatarBox from "./AvatarBox"; import session from "../app/Session"; import routes from "./routes"; import { AccountActionLimitReachedError, UserExistsError } from "../app/errors"; +import { fadeReload } from "../app/transition"; const Signup = () => { const { t } = useTranslation(); @@ -30,7 +31,7 @@ const Signup = () => { const token = await accountApi.login(user); console.log(`[Signup] User signup for user ${user.username} successful, token is ${token}`); await session.store(user.username, token); - window.location.href = routes.app; + fadeReload(routes.app); } catch (e) { console.log(`[Signup] Signup for user ${user.username} failed`, e); if (e instanceof UserExistsError) {