Use "useLayoutEffect" for setting title and actions

src/components/settings/DeviceSetting.tsx

@@ -11,7 +11,7 @@ import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import MenuItem from '@mui/material/MenuItem';
 import { useTranslation } from 'react-i18next';
-import { useContext, useEffect } from 'react';
+import { useContext, useLayoutEffect } from 'react';
 import { updateMetadataServerSettings, useMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';
 import { MetadataServerSettingKeys, MetadataServerSettings } from '@/typings.ts';
 import { makeToast } from '@/components/util/Toast.tsx';
@@ -27,7 +27,7 @@ export const DeviceSetting = () => {
     const { t } = useTranslation();
     const { setTitle, setAction } = useContext(NavBarContext);
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         setTitle(t('settings.device.title.settings'));
         setAction(null);
 

src/screens/Browse.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { useCallback, useContext, useLayoutEffect, useRef, useState } from 'react';
 import Tab from '@mui/material/Tab';
 import { useTranslation } from 'react-i18next';
 import { Sources } from '@/screens/Sources';
@@ -31,7 +31,7 @@ export function Browse() {
 
     const [tabNum, setTabNum] = useState<number>(0);
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         setTitle(t('global.label.browse'));
     }, [t]);
 

src/screens/DownloadQueue.tsx

@@ -16,7 +16,7 @@ import Stack from '@mui/material/Stack';
 import Box, { BoxProps } from '@mui/material/Box';
 import Tooltip from '@mui/material/Tooltip';
 import IconButton from '@mui/material/IconButton';
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useLayoutEffect } from 'react';
 import { DragDropContext, Draggable, DraggableProvided, DropResult } from 'react-beautiful-dnd';
 import Typography from '@mui/material/Typography';
 import { Link } from 'react-router-dom';
@@ -152,7 +152,7 @@ export const DownloadQueue: React.FC = () => {
         }
     };
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         setTitle(t('download.queue.title'));
         setAction(
             <>

src/screens/Extensions.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { fromEvent } from 'file-selector';
 import IconButton from '@mui/material/IconButton';
 import AddIcon from '@mui/icons-material/Add';
@@ -174,7 +174,7 @@ export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
         }
     };
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         setAction(
             <>
                 <AppbarSearch />

src/screens/Library.tsx

@@ -9,7 +9,7 @@
 import Chip, { ChipProps } from '@mui/material/Chip';
 import Tab from '@mui/material/Tab';
 import { styled } from '@mui/material/styles';
-import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useState } from 'react';
+import { useCallback, useContext, useLayoutEffect, useMemo, useState } from 'react';
 import { useQueryParam, NumberParam } from 'use-query-params';
 import { useTranslation } from 'react-i18next';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
@@ -158,7 +158,7 @@ export function Library() {
     }, [isSelectModeActive, selectedMangas]);
 
     const { setTitle, setAction } = useContext(NavBarContext);
-    useEffect(() => {
+    useLayoutEffect(() => {
         const title = t('library.title');
         const navBarTitle = (
             <TitleWithSizeTag>

src/screens/Manga.tsx

@@ -12,7 +12,7 @@ import IconButton from '@mui/material/IconButton';
 import Stack from '@mui/material/Stack';
 import Tooltip from '@mui/material/Tooltip';
 import Box from '@mui/material/Box';
-import React, { useContext, useEffect, useRef } from 'react';
+import React, { useContext, useEffect, useLayoutEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import { isNetworkRequestInFlight } from '@apollo/client/core/networkStatus';
@@ -58,7 +58,7 @@ export const Manga: React.FC = () => {
         }
     }, [manga]);
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         setTitle(manga?.title ?? t('manga.title_one'));
         setAction(null);
 
@@ -68,7 +68,7 @@ export const Manga: React.FC = () => {
         };
     }, [t, manga?.title]);
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         setAction(
             <Stack
                 direction="row"

src/screens/Migrate.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useLayoutEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { NavBarContext } from '@/components/context/NavbarContext.tsx';
@@ -67,7 +67,7 @@ export const Migrate = () => {
         notifyOnNetworkStatusChange: true,
     });
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         setTitle(name ?? sourceId ?? t('migrate.title'));
         setAction(<GridLayouts gridLayout={gridLayout} onChange={setGridLayout} />);
 

src/screens/Reader.tsx

@@ -7,7 +7,7 @@
  */
 
 import CircularProgress from '@mui/material/CircularProgress';
-import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import Box from '@mui/material/Box';
 import { useTranslation } from 'react-i18next';
@@ -407,7 +407,7 @@ export function Reader() {
         } else setCurPage(chapter.lastPageRead);
     }, [chapter, isLoading]);
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         if (!manga?.title || chapter.name === t('global.label.loading')) {
             setTitle(t('reader.title'));
         } else {
@@ -424,7 +424,7 @@ export function Reader() {
         }
     }, [areDefaultSettingsLoading, isMangaLoading]);
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         // set the custom navbar
         setOverride({
             status: true,

src/screens/SearchAll.tsx

@@ -9,7 +9,7 @@
 import Card from '@mui/material/Card';
 import CardActionArea from '@mui/material/CardActionArea';
 import Typography from '@mui/material/Typography';
-import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { StringParam, useQueryParam } from 'use-query-params';
 import { useTranslation } from 'react-i18next';
@@ -234,7 +234,7 @@ export const SearchAll: React.FC = () => {
         [setSourceToLoadingStateMap],
     );
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         setTitle(t(isMigrateMode ? 'migrate.search.title' : 'search.title.global_search', { title: mangaTitle }));
         setAction(
             <>

src/screens/Settings.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useContext, useEffect } from 'react';
+import { useContext, useLayoutEffect } from 'react';
 import AutoStoriesIcon from '@mui/icons-material/AutoStories';
 import List from '@mui/material/List';
 import ListAltIcon from '@mui/icons-material/ListAlt';
@@ -34,7 +34,7 @@ export function Settings() {
     const { t } = useTranslation();
 
     const { setTitle, setAction } = useContext(NavBarContext);
-    useEffect(() => {
+    useLayoutEffect(() => {
         setTitle(t('settings.title'));
         setAction(null);
 

src/screens/SourceConfigure.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { createElement, useContext, useEffect } from 'react';
+import { createElement, useContext, useLayoutEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import List from '@mui/material/List';
 import { useTranslation } from 'react-i18next';
@@ -46,7 +46,7 @@ export function SourceConfigure() {
     const { t } = useTranslation();
     const { setTitle, setAction } = useContext(NavBarContext);
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         setTitle(t('source.configuration.title'));
         setAction(null);
 

src/screens/SourceMangas.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useState } from 'react';
 import { useParams, useNavigate, useLocation } from 'react-router-dom';
 import IconButton from '@mui/material/IconButton';
 import SettingsIcon from '@mui/icons-material/Settings';
@@ -397,7 +397,7 @@ export function SourceMangas() {
         [query],
     );
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         setTitle(source?.displayName ?? t('source.title_one'));
         setAction(
             <>

src/screens/Sources.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Fragment, useContext, useEffect, useMemo } from 'react';
+import { Fragment, useContext, useEffect, useLayoutEffect, useMemo } from 'react';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
@@ -92,7 +92,7 @@ export function Sources() {
         });
     }, []);
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         setAction(
             <>
                 <Tooltip title={t('search.title.global_search')}>

src/screens/Updates.tsx

@@ -15,7 +15,7 @@ import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
-import React, { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import Refresh from '@mui/icons-material/Refresh';
@@ -88,7 +88,7 @@ export const Updates: React.FC = () => {
     });
     const lastUpdateTimestamp = lastUpdateTimestampData?.lastUpdateTimestamp.timestamp;
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         setTitle(t('updates.title'));
         setAction(<UpdateChecker />);
 

src/screens/settings/About.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useContext, useEffect } from 'react';
+import { useContext, useLayoutEffect } from 'react';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
@@ -195,7 +195,7 @@ export function About() {
     const { t } = useTranslation();
     const { setTitle, setAction } = useContext(NavBarContext);
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         setTitle(t('settings.about.title'));
         setAction(null);
 

src/screens/settings/Backup.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useLayoutEffect, useState } from 'react';
 import List from '@mui/material/List';
 import ListItemText from '@mui/material/ListItemText';
 import { fromEvent } from 'file-selector';
@@ -58,7 +58,7 @@ let backupRestoreId: string | undefined;
 export function Backup() {
     const { t } = useTranslation();
     const { setTitle, setAction } = useContext(NavBarContext);
-    useEffect(() => {
+    useLayoutEffect(() => {
         setTitle(t('settings.backup.title'));
         setAction(null);
 

src/screens/settings/BrowseSettings.tsx

@@ -7,7 +7,7 @@
  */
 
 import { Trans, useTranslation } from 'react-i18next';
-import { useContext, useEffect } from 'react';
+import { useContext, useLayoutEffect } from 'react';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
@@ -40,7 +40,7 @@ export const BrowseSettings = () => {
     const { t } = useTranslation();
     const { setTitle, setAction } = useContext(NavBarContext);
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         setTitle(t('settings.browse.title'));
         setAction(null);
     }, [t]);

src/screens/settings/Categories.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useMemo, useState, useContext, useEffect } from 'react';
+import { useMemo, useState, useContext, useLayoutEffect } from 'react';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { DragDropContext, Draggable, DraggableProvided, DropResult } from 'react-beautiful-dnd';
@@ -100,7 +100,7 @@ export function Categories() {
     const { t } = useTranslation();
 
     const { setTitle, setAction } = useContext(NavBarContext);
-    useEffect(() => {
+    useLayoutEffect(() => {
         setTitle(t('category.title.category_other'));
         setAction(null);
 

src/screens/settings/DefaultReaderSettings.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useContext, useEffect } from 'react';
+import { useContext, useLayoutEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AllowedMetadataValueTypes, IReaderSettings } from '@/typings';
 import { convertToGqlMeta, requestUpdateServerMetadata } from '@/lib/metadata/metadata.ts';
@@ -25,7 +25,7 @@ import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
 export function DefaultReaderSettings() {
     const { t } = useTranslation();
     const { setTitle, setAction } = useContext(NavBarContext);
-    useEffect(() => {
+    useLayoutEffect(() => {
         setTitle(t('reader.settings.title.default_reader_settings'));
         setAction(null);
 

src/screens/settings/DownloadSettings.tsx

@@ -7,7 +7,7 @@
  */
 
 import { useTranslation } from 'react-i18next';
-import { useContext, useEffect } from 'react';
+import { useContext, useLayoutEffect } from 'react';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
@@ -55,7 +55,7 @@ export const DownloadSettings = () => {
     const { t } = useTranslation();
     const { setTitle, setAction } = useContext(NavBarContext);
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         setTitle(t('download.settings.title'));
         setAction(null);
 

src/screens/settings/LibraryDuplicates.tsx

@@ -7,7 +7,7 @@
  */
 
 import { useTranslation } from 'react-i18next';
-import { useContext, useEffect, useMemo } from 'react';
+import { useContext, useLayoutEffect, useMemo } from 'react';
 import IconButton from '@mui/material/IconButton';
 import SettingsIcon from '@mui/icons-material/Settings';
 import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';
@@ -118,7 +118,7 @@ export const LibraryDuplicates = () => {
     );
 
     const { setTitle, setAction } = useContext(NavBarContext);
-    useEffect(() => {
+    useLayoutEffect(() => {
         setTitle(t('library.settings.advanced.duplicates.label.title'));
         setAction(
             <>

src/screens/settings/LibrarySettings.tsx

@@ -7,7 +7,7 @@
  */
 
 import { useTranslation } from 'react-i18next';
-import { useContext, useEffect } from 'react';
+import { useContext, useLayoutEffect } from 'react';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemButton from '@mui/material/ListItemButton';
@@ -64,7 +64,7 @@ export function LibrarySettings() {
     const { t } = useTranslation();
     const { setTitle, setAction } = useContext(NavBarContext);
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         setTitle(t('library.settings.title'));
         setAction(null);
 

src/screens/settings/ServerSettings.tsx

@@ -7,7 +7,7 @@
  */
 
 import { useTranslation, Trans } from 'react-i18next';
-import { useContext, useEffect, useMemo } from 'react';
+import { useContext, useLayoutEffect, useMemo } from 'react';
 import Link from '@mui/material/Link';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
@@ -96,7 +96,7 @@ export const ServerSettings = () => {
     const { t } = useTranslation();
     const { setTitle, setAction } = useContext(NavBarContext);
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         setTitle(t('settings.server.title.settings'));
         setAction(null);
 

src/screens/settings/TrackingSettings.tsx

@@ -7,7 +7,7 @@
  */
 
 import { useTranslation } from 'react-i18next';
-import { useContext, useEffect } from 'react';
+import { useContext, useLayoutEffect } from 'react';
 import List from '@mui/material/List';
 
 import ListSubheader from '@mui/material/ListSubheader';
@@ -33,7 +33,7 @@ export const TrackingSettings = () => {
     const { t } = useTranslation();
     const { setTitle } = useContext(NavBarContext);
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         setTitle(t('tracking.settings.title.settings'));
     }, [t]);
 

src/screens/settings/WebUISettings.tsx

@@ -7,7 +7,7 @@
  */
 
 import { useTranslation } from 'react-i18next';
-import { useContext, useEffect } from 'react';
+import { useContext, useLayoutEffect } from 'react';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
@@ -120,7 +120,7 @@ export const WebUISettings = () => {
     const { t } = useTranslation();
     const { setTitle, setAction } = useContext(NavBarContext);
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         setTitle(t('settings.webui.title.settings'));
         setAction(null);
 

src/screens/settings/appearance/Appearance.tsx

@@ -7,7 +7,7 @@
  */
 
 import { useTranslation } from 'react-i18next';
-import { useContext, useEffect } from 'react';
+import { useContext, useLayoutEffect } from 'react';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
@@ -40,7 +40,7 @@ export const Appearance = () => {
     const { themeMode, setThemeMode, pureBlackMode, setPureBlackMode, appTheme } = useContext(ThemeModeContext);
 
     const { setTitle, setAction } = useContext(NavBarContext);
-    useEffect(() => {
+    useLayoutEffect(() => {
         setTitle(t('settings.appearance.title'));
         setAction(null);