From 1ee454c137625452d31775aaeb7f92c20fef82a1 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Tue, 5 May 2026 02:09:36 +0200
Subject: [PATCH] Fix infinite hook call loop

Regression a7dcdd5651a140c3e3b295e6963211fca88d3b5d

"usePrevious" uses "useEffect" to update the ref while the fix of the commit updated the state during the render function call.
This causes the component to not actually render and immediately call the render function again. Which then leads to the "usePrevious" hooks "useEffect" to never getting called.
---
 src/base/components/inputs/LanguageSelect.tsx | 127 +++++----
 .../components/SourceLanguageSelect.tsx       | 240 ++++++++++--------
 src/features/source/services/Sources.ts       |   2 +-
 3 files changed, 208 insertions(+), 161 deletions(-)

diff --git a/src/base/components/inputs/LanguageSelect.tsx b/src/base/components/inputs/LanguageSelect.tsx
index e542c140..815d7472 100644
--- a/src/base/components/inputs/LanguageSelect.tsx
+++ b/src/base/components/inputs/LanguageSelect.tsx
@@ -23,18 +23,22 @@ import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
 import { translateExtensionLanguage } from '@/features/extension/Extensions.utils.ts';
 import { languageSortComparator, toUniqueLanguageCodes } from '@/base/utils/Languages.ts';
 import { usePrevious } from '@mantine/hooks';
+import { AwaitableComponent, type AwaitableComponentProps } from 'awaitable-component';
 
-interface IProps {
+const LanguageSelectDialog = ({
+    isVisible,
+    onDismiss,
+    onSubmit,
+    onExitComplete,
+    selectedLanguages,
+    languages,
+}: AwaitableComponentProps<string[]> & {
     selectedLanguages: string[];
-    setSelectedLanguages: (languages: string[]) => void;
     languages: string[];
-}
-
-export function LanguageSelect({ selectedLanguages, setSelectedLanguages, languages }: IProps) {
+}) => {
     const { t } = useLingui();
 
     const [tmpSelectedLanguages, setTmpSelectedLanguages] = useState(toUniqueLanguageCodes(selectedLanguages));
-    const [open, setOpen] = useState<boolean>(false);
 
     const previousSelectedLanguages = usePrevious(selectedLanguages);
 
@@ -53,14 +57,8 @@ export function LanguageSelect({ selectedLanguages, setSelectedLanguages, langua
         [languages, tmpSelectedLanguages],
     );
 
-    const handleCancel = () => {
-        setOpen(false);
-        setTmpSelectedLanguages(toUniqueLanguageCodes(selectedLanguages));
-    };
-
     const handleOk = () => {
-        setOpen(false);
-        setSelectedLanguages(toUniqueLanguageCodes(tmpSelectedLanguages));
+        onSubmit(toUniqueLanguageCodes(tmpSelectedLanguages));
     };
 
     const handleChange = (language: string, selected: boolean) => {
@@ -72,45 +70,70 @@ export function LanguageSelect({ selectedLanguages, setSelectedLanguages, langua
     };
 
     return (
-        <>
-            <CustomTooltip title={t`Settings`}>
-                <IconButton onClick={() => setOpen(true)} aria-label="display more actions" edge="end" color="inherit">
-                    <FilterListIcon />
-                </IconButton>
-            </CustomTooltip>
-            <Dialog fullWidth maxWidth="xs" open={open} onClose={handleCancel}>
-                <DialogTitle>{t`Allowed Languages`}</DialogTitle>
-                <DialogContent dividers sx={{ padding: 0 }}>
-                    <Virtuoso
-                        style={{
-                            height: languagesSortedBySelectState.length * 54,
-                            minHeight: '25vh',
-                            maxHeight: '50vh',
-                        }}
-                        data={languagesSortedBySelectState}
-                        increaseViewportBy={400}
-                        computeItemKey={(index) => languagesSortedBySelectState[index]}
-                        itemContent={(_index, language) => (
-                            <ListItem>
-                                <ListItemText primary={translateExtensionLanguage(language)} />
+        <Dialog fullWidth maxWidth="xs" open={isVisible} onClose={onDismiss} onTransitionExited={onExitComplete}>
+            <DialogTitle>{t`Allowed Languages`}</DialogTitle>
+            <DialogContent dividers sx={{ padding: 0 }}>
+                <Virtuoso
+                    style={{
+                        height: languagesSortedBySelectState.length * 54,
+                        minHeight: '25vh',
+                        maxHeight: '50vh',
+                    }}
+                    data={languagesSortedBySelectState}
+                    increaseViewportBy={400}
+                    computeItemKey={(index) => languagesSortedBySelectState[index]}
+                    itemContent={(_index, language) => (
+                        <ListItem>
+                            <ListItemText primary={translateExtensionLanguage(language)} />
 
-                                <Switch
-                                    checked={tmpSelectedLanguages.includes(language)}
-                                    onChange={(e) => handleChange(language, e.target.checked)}
-                                />
-                            </ListItem>
-                        )}
-                    />
-                </DialogContent>
-                <DialogActions>
-                    <Button autoFocus onClick={handleCancel} color="primary">
-                        {t`Cancel`}
-                    </Button>
-                    <Button onClick={handleOk} color="primary">
-                        {t`Ok`}
-                    </Button>
-                </DialogActions>
-            </Dialog>
-        </>
+                            <Switch
+                                checked={tmpSelectedLanguages.includes(language)}
+                                onChange={(e) => handleChange(language, e.target.checked)}
+                            />
+                        </ListItem>
+                    )}
+                />
+            </DialogContent>
+            <DialogActions>
+                <Button autoFocus onClick={onDismiss} color="primary">
+                    {t`Cancel`}
+                </Button>
+                <Button onClick={handleOk} color="primary">
+                    {t`Ok`}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};
+
+export function LanguageSelect({
+    setSelectedLanguages,
+    ...props
+}: {
+    selectedLanguages: string[];
+    setSelectedLanguages: (languages: string[]) => void;
+    languages: string[];
+}) {
+    const { t } = useLingui();
+
+    return (
+        <CustomTooltip title={t`Settings`}>
+            <IconButton
+                onClick={async () => {
+                    try {
+                        const updatedSelectedLanguages = await AwaitableComponent.show(LanguageSelectDialog, props);
+
+                        setSelectedLanguages(updatedSelectedLanguages);
+                    } catch (e) {
+                        // ignore
+                    }
+                }}
+                aria-label="display more actions"
+                edge="end"
+                color="inherit"
+            >
+                <FilterListIcon />
+            </IconButton>
+        </CustomTooltip>
     );
 }
diff --git a/src/features/source/components/SourceLanguageSelect.tsx b/src/features/source/components/SourceLanguageSelect.tsx
index 4e8702cd..0ceb7fab 100644
--- a/src/features/source/components/SourceLanguageSelect.tsx
+++ b/src/features/source/components/SourceLanguageSelect.tsx
@@ -40,16 +40,21 @@ import { ListCardAvatar } from '@/base/components/lists/cards/ListCardAvatar.tsx
 import { makeToast } from '@/base/utils/Toast.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { VirtuosoUtil } from '@/lib/virtuoso/Virtuoso.util.tsx';
-import { usePrevious } from '@mantine/hooks';
+import { AwaitableComponent, type AwaitableComponentProps } from 'awaitable-component';
 
-export const SourceLanguageSelect = ({
+const SourceLanguageSelectDialog = ({
+    isVisible,
+    onDismiss,
+    onSubmit,
+    onExitComplete,
     selectedLanguages,
-    setSelectedLanguages,
     languages,
     sources,
-}: {
+}: AwaitableComponentProps<{
+    selectedLanguages: string[];
+    sourceEnabledStateMetaUpdatePayload: Parameters<typeof batchUpdateSourceMetadata>[0];
+}> & {
     selectedLanguages: string[];
-    setSelectedLanguages: (languages: string[]) => void;
     languages: string[];
     sources: (SourceIdInfo &
         SourceLanguageInfo &
@@ -63,12 +68,6 @@ export const SourceLanguageSelect = ({
     const [tmpSourceIdToEnabledState, setTmpSourceIdToEnabledState] = useState<Record<SourceIdInfo['id'], boolean>>({});
 
     const [tmpSelectedLanguages, setTmpSelectedLanguages] = useState(toUniqueLanguageCodes(selectedLanguages));
-    const [open, setOpen] = useState<boolean>(false);
-
-    const previousSelectedLanguages = usePrevious(selectedLanguages);
-    if (previousSelectedLanguages && previousSelectedLanguages !== selectedLanguages) {
-        setTmpSelectedLanguages(toUniqueLanguageCodes(selectedLanguages));
-    }
 
     const sourcesByLanguage = useMemo(() => Sources.groupByLanguage(sources), [sources]);
 
@@ -109,18 +108,10 @@ export const SourceLanguageSelect = ({
         useCallback((index) => flattenedSourcesByLanguages[index].id, [flattenedSourcesByLanguages]),
     );
 
-    const handleCancel = () => {
-        setOpen(false);
-
-        setTmpSourceIdToEnabledState({});
-        setTmpSelectedLanguages(toUniqueLanguageCodes(selectedLanguages));
-    };
-
     const handleOk = () => {
-        setOpen(false);
-
-        batchUpdateSourceMetadata(
-            Object.entries(tmpSourceIdToEnabledState)
+        onSubmit({
+            selectedLanguages: toUniqueLanguageCodes(tmpSelectedLanguages),
+            sourceEnabledStateMetaUpdatePayload: Object.entries(tmpSourceIdToEnabledState)
                 .map(([sourceId, enabled]) => {
                     const source = sources.find((sourceToEnable) => sourceToEnable.id === sourceId);
 
@@ -134,9 +125,7 @@ export const SourceLanguageSelect = ({
                     };
                 })
                 .filter((entry) => entry !== null),
-        ).catch((e) => makeToast(t`Failed to save changes`, 'error', getErrorMessage(e)));
-        setTmpSourceIdToEnabledState({});
-        setSelectedLanguages(toUniqueLanguageCodes(tmpSelectedLanguages));
+        });
     };
 
     const handleChange = (language: string, selected: boolean) => {
@@ -148,92 +137,127 @@ export const SourceLanguageSelect = ({
     };
 
     return (
-        <>
-            <CustomTooltip title={t`Settings`}>
-                <IconButton onClick={() => setOpen(true)} aria-label="display more actions" edge="end" color="inherit">
-                    <FilterListIcon />
-                </IconButton>
-            </CustomTooltip>
-            <Dialog fullWidth maxWidth="xs" open={open} onClose={handleCancel}>
-                <DialogTitle>{t`Allowed Languages`}</DialogTitle>
-                <DialogContent dividers sx={{ padding: 0 }}>
-                    {!languages.length && <Box sx={{ p: 1 }}>{t`No sources installed`}</Box>}
-                    <GroupedVirtuoso
-                        style={{
-                            height: languagesSortedBySelectState.length * 54,
-                            minHeight: '25vh',
-                            maxHeight: '50vh',
-                        }}
-                        groupCounts={groupCounts}
-                        increaseViewportBy={400}
-                        computeItemKey={computeItemKey}
-                        groupContent={(index) => {
-                            const language = languagesSortedBySelectState[index];
-                            const isEnabled = tmpSelectedLanguages.includes(language);
+        <Dialog fullWidth maxWidth="xs" open={isVisible} onClose={onDismiss} onTransitionExited={onExitComplete}>
+            <DialogTitle>{t`Allowed Languages`}</DialogTitle>
+            <DialogContent dividers sx={{ padding: 0 }}>
+                {!languages.length && <Box sx={{ p: 1 }}>{t`No sources installed`}</Box>}
+                <GroupedVirtuoso
+                    style={{
+                        height: languagesSortedBySelectState.length * 54,
+                        minHeight: '25vh',
+                        maxHeight: '50vh',
+                    }}
+                    groupCounts={groupCounts}
+                    increaseViewportBy={400}
+                    computeItemKey={computeItemKey}
+                    groupContent={(index) => {
+                        const language = languagesSortedBySelectState[index];
+                        const isEnabled = tmpSelectedLanguages.includes(language);
 
-                            return (
-                                <ListItem
-                                    sx={{
-                                        backgroundColor: 'background.paper',
-                                        backgroundImage: 'var(--Paper-overlay)',
-                                    }}
-                                >
-                                    <ListItemText primary={translateExtensionLanguage(language)} />
-                                    <Switch
-                                        checked={isEnabled}
-                                        onChange={(e) => handleChange(language, e.target.checked)}
-                                    />
-                                </ListItem>
-                            );
-                        }}
-                        itemContent={(index) => {
-                            const source = flattenedSourcesByLanguages[index];
+                        return (
+                            <ListItem
+                                sx={{
+                                    backgroundColor: 'background.paper',
+                                    backgroundImage: 'var(--Paper-overlay)',
+                                }}
+                            >
+                                <ListItemText primary={translateExtensionLanguage(language)} />
+                                <Switch
+                                    checked={isEnabled}
+                                    onChange={(e) => handleChange(language, e.target.checked)}
+                                />
+                            </ListItem>
+                        );
+                    }}
+                    itemContent={(index) => {
+                        const source = flattenedSourcesByLanguages[index];
 
-                            return (
-                                <ListItem sx={{ pl: 3 }}>
-                                    <ListItemAvatar sx={{ minWidth: 32, mr: 1 }}>
-                                        <ListCardAvatar
-                                            iconUrl={requestManager.getValidImgUrlFor(source.iconUrl)}
-                                            alt={source.name}
-                                            slots={{
-                                                avatarProps: {
-                                                    sx: {
-                                                        width: 32,
-                                                        height: 32,
-                                                    },
+                        return (
+                            <ListItem sx={{ pl: 3 }}>
+                                <ListItemAvatar sx={{ minWidth: 32, mr: 1 }}>
+                                    <ListCardAvatar
+                                        iconUrl={requestManager.getValidImgUrlFor(source.iconUrl)}
+                                        alt={source.name}
+                                        slots={{
+                                            avatarProps: {
+                                                sx: {
+                                                    width: 32,
+                                                    height: 32,
                                                 },
-                                                spinnerImageProps: {
-                                                    ignoreQueue: true,
-                                                },
-                                            }}
-                                        />
-                                    </ListItemAvatar>
-                                    <ListItemText primary={source.name} />
-                                    <Checkbox
-                                        checked={
-                                            tmpSourceIdToEnabledState[source.id] ?? getSourceMetadata(source).isEnabled
-                                        }
-                                        onChange={(e) =>
-                                            setTmpSourceIdToEnabledState({
-                                                ...tmpSourceIdToEnabledState,
-                                                [source.id]: e.target.checked,
-                                            })
-                                        }
+                                            },
+                                            spinnerImageProps: {
+                                                ignoreQueue: true,
+                                            },
+                                        }}
                                     />
-                                </ListItem>
-                            );
-                        }}
-                    />
-                </DialogContent>
-                <DialogActions>
-                    <Button autoFocus onClick={handleCancel} color="primary">
-                        {t`Cancel`}
-                    </Button>
-                    <Button onClick={handleOk} color="primary">
-                        {t`Ok`}
-                    </Button>
-                </DialogActions>
-            </Dialog>
-        </>
+                                </ListItemAvatar>
+                                <ListItemText primary={source.name} />
+                                <Checkbox
+                                    checked={
+                                        tmpSourceIdToEnabledState[source.id] ?? getSourceMetadata(source).isEnabled
+                                    }
+                                    onChange={(e) =>
+                                        setTmpSourceIdToEnabledState({
+                                            ...tmpSourceIdToEnabledState,
+                                            [source.id]: e.target.checked,
+                                        })
+                                    }
+                                />
+                            </ListItem>
+                        );
+                    }}
+                />
+            </DialogContent>
+            <DialogActions>
+                <Button autoFocus onClick={onDismiss} color="primary">
+                    {t`Cancel`}
+                </Button>
+                <Button onClick={handleOk} color="primary">
+                    {t`Ok`}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};
+
+export const SourceLanguageSelect = ({
+    setSelectedLanguages,
+    ...props
+}: {
+    selectedLanguages: string[];
+    setSelectedLanguages: (languages: string[]) => Promise<void>;
+    languages: string[];
+    sources: (SourceIdInfo &
+        SourceLanguageInfo &
+        SourceNameInfo &
+        SourceDisplayNameInfo &
+        SourceIconInfo &
+        SourceMetaInfo)[];
+}) => {
+    const { t } = useLingui();
+
+    return (
+        <CustomTooltip title={t`Settings`}>
+            <IconButton
+                onClick={async () => {
+                    try {
+                        const { selectedLanguages: updatedSelectedLanguages, sourceEnabledStateMetaUpdatePayload } =
+                            await AwaitableComponent.show(SourceLanguageSelectDialog, props);
+
+                        await Promise.all([
+                            setSelectedLanguages(updatedSelectedLanguages),
+                            batchUpdateSourceMetadata(sourceEnabledStateMetaUpdatePayload),
+                        ]).catch((e) => makeToast(t`Failed to save changes`, 'error', getErrorMessage(e)));
+                    } catch (e) {
+                        // Ignore
+                    }
+                }}
+                aria-label="display more actions"
+                edge="end"
+                color="inherit"
+            >
+                <FilterListIcon />
+            </IconButton>
+        </CustomTooltip>
     );
 };
diff --git a/src/features/source/services/Sources.ts b/src/features/source/services/Sources.ts
index acff06c5..df0f3fbb 100644
--- a/src/features/source/services/Sources.ts
+++ b/src/features/source/services/Sources.ts
@@ -176,7 +176,7 @@ export class Sources {
 
     static useLanguages(): {
         languages: string[];
-        setLanguages: (languages: string[]) => void;
+        setLanguages: (languages: string[]) => Promise<void>;
     } {
         const { t } = useLingui();
         const {