Use "useLayoutEffect" for setting title and actions

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);