Settings window: Don't show until everything is rendered

main.js

@@ -907,17 +907,16 @@ function showSettingsWindow() {
   settingsWindow.loadURL(prepareFileUrl([__dirname, 'settings.html']));
 
   settingsWindow.on('closed', () => {
-    removeDarkOverlay();
     settingsWindow = null;
   });
 
-  settingsWindow.once('ready-to-show', () => {
-    settingsWindow.show();
-    settingsWindow.webContents.send('render');
-
-    if (config.get('openDevTools')) {
-      settingsWindow.webContents.openDevTools();
+  ipc.once('settings-done-rendering', () => {
+    if (!settingsWindow) {
+      console.warn('settings-done-rendering: no settingsWindow available!');
+      return;
     }
+
+    settingsWindow.show();
   });
 }
 

ts/components/Preferences.stories.tsx

@@ -103,6 +103,7 @@ const createProps = (): PropsType => ({
   addCustomColor: action('addCustomColor'),
   closeSettings: action('closeSettings'),
   doDeleteAllData: action('doDeleteAllData'),
+  doneRendering: action('doneRendering'),
   editCustomColor: action('editCustomColor'),
   getConversationsWithCustomColor: () => Promise.resolve([]),
   initialSpellCheckSetting: true,

ts/components/Preferences.tsx

@@ -78,6 +78,7 @@ export type PropsType = {
   addCustomColor: (color: CustomColorType) => unknown;
   closeSettings: () => unknown;
   doDeleteAllData: () => unknown;
+  doneRendering: () => unknown;
   editCustomColor: (colorId: string, color: CustomColorType) => unknown;
   getConversationsWithCustomColor: (
     colorId: string
@@ -164,6 +165,7 @@ export const Preferences = ({
   defaultConversationColor,
   deviceName = '',
   doDeleteAllData,
+  doneRendering,
   editCustomColor,
   getConversationsWithCustomColor,
   hasAudioNotifications,
@@ -251,6 +253,10 @@ export const Preferences = ({
     document.body.classList.toggle('dark-theme', theme === ThemeType.dark);
   }, [theme]);
 
+  useEffect(() => {
+    doneRendering();
+  }, [doneRendering]);
+
   useEffect(() => {
     const handler = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {

ts/window.d.ts

@@ -180,15 +180,6 @@ declare global {
 
     WhatIsThis: WhatIsThis;
 
-    SignalModule: {
-      registerReactRenderer: (
-        f: <P extends {}>(
-          component: FunctionComponent<P> | ComponentClass<P>,
-          props?: (Attributes & P) | null
-        ) => void
-      ) => void;
-    };
-
     registerScreenShareControllerRenderer: (
       f: (
         component: typeof CallingScreenSharingController,
@@ -515,6 +506,17 @@ declare global {
     GV2_MIGRATION_DISABLE_INVITE: boolean;
 
     RETRY_DELAY: boolean;
+
+    // These elements are only available in the Settings window
+    SignalModule: {
+      registerReactRenderer: (
+        f: <P extends {}>(
+          component: FunctionComponent<P> | ComponentClass<P>,
+          props?: (Attributes & P) | null
+        ) => void
+      ) => void;
+    };
+    renderPreferences: () => unknown;
   }
 
   // We want to extend `Error`, so we need an interface.

ts/windows/settings/init.ts

@@ -9,3 +9,5 @@ window.SignalModule.registerReactRenderer((Component, props) => {
     document.getElementById('app')
   );
 });
+
+window.renderPreferences();

ts/windows/settings/preload.ts

@@ -43,6 +43,9 @@ window.ReactDOM = ReactDOM;
 window.getEnvironment = getEnvironment;
 window.getVersion = () => String(config.version);
 window.i18n = i18n.setup(locale, localeMessages);
+function doneRendering() {
+  ipcRenderer.send('settings-done-rendering');
+}
 
 const settingAudioNotification = createSetting('audioNotification');
 const settingAutoDownloadUpdate = createSetting('autoDownloadUpdate');
@@ -157,9 +160,9 @@ function getSystemTraySettingValues(
   };
 }
 
-async function renderPreferences() {
+window.renderPreferences = async () => {
   if (!renderComponent) {
-    setTimeout(renderPreferences, 100);
+    setTimeout(window.renderPreferences, 100);
     return;
   }
 
@@ -293,6 +296,7 @@ async function renderPreferences() {
     addCustomColor: ipcAddCustomColor,
     closeSettings: () => ipcRenderer.send('close-settings'),
     doDeleteAllData: () => ipcRenderer.send('delete-all-data'),
+    doneRendering,
     editCustomColor: ipcEditCustomColor,
     getConversationsWithCustomColor: ipcGetConversationsWithCustomColor,
     initialSpellCheckSetting:
@@ -377,13 +381,11 @@ async function renderPreferences() {
   function reRender<Value>(f: (value: Value) => Promise<Value>) {
     return async (value: Value) => {
       await f(value);
-      renderPreferences();
+      window.renderPreferences();
     };
   }
 
   renderComponent(Preferences, props);
-}
-
-ipcRenderer.on('render', renderPreferences);
+};
 
 initializeLogging();