diff --git a/src/components/settings/tabs/plugins/PluginModal.tsx b/src/components/settings/tabs/plugins/PluginModal.tsx index 76b266db9..f4512870c 100644 --- a/src/components/settings/tabs/plugins/PluginModal.tsx +++ b/src/components/settings/tabs/plugins/PluginModal.tsx @@ -79,10 +79,13 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti const hasSettings = Boolean(pluginSettings && plugin.options && !isObjectEmpty(plugin.options)); // prefill dummy user to avoid layout shift - const [authors, setAuthors] = useState[]>(() => [makeDummyUser({ username: "Loading...", id: "-1465912127305809920" })]); + const dummyAuthor = makeDummyUser({ username: "Loading...", id: "-1465912127305809920" }); + const [authors, setAuthors] = useState[]>(() => [dummyAuthor]); useEffect(() => { (async () => { + const loadedAuthors: Partial[] = []; + for (const user of plugin.authors.slice(0, 6)) { try { const author = user.id @@ -90,11 +93,13 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti .catch(() => makeDummyUser({ username: user.name })) : makeDummyUser({ username: user.name }); - setAuthors(a => [...a, author]); + loadedAuthors.push(author); } catch (e) { continue; } } + + setAuthors(loadedAuthors.length ? loadedAuthors : [dummyAuthor]); })(); }, [plugin.authors]);