fix(website): ensure feedback widget renders with correct theme (#11224)

Co-authored-by: Phil Parsons <p-m-p@users.noreply.github.com>
Co-authored-by: sebastien <lorber.sebastien@gmail.com>

website/src/plugins/featureRequests/FeatureRequestsPage.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {type ReactNode, useEffect} from 'react';
+import React, {type ReactNode, useEffect, useState} from 'react';
 import clsx from 'clsx';
 import {useColorMode} from '@docusaurus/theme-common';
 import Layout from '@theme/Layout';
@@ -15,8 +15,25 @@ import styles from './styles.module.css';
 
 const BOARD_TOKEN = '054e0e53-d951-b14c-7e74-9eb8f9ed2f91';
 
+// TODO useColorMode() hook is not reliable on first call
+//  To ensure we always init Canny with the correct theme, we prefer to delay
+//  initialization until we know the theme is correct
+//  See also https://github.com/facebook/docusaurus/issues/7986
+//  See also https://github.com/facebook/docusaurus/pull/11224
+function useIsColorModeReliable() {
+  const [isColorModeReliable, setIsColorModeReliable] = useState(false);
+  useEffect(() => {
+    setIsColorModeReliable(true);
+  }, []);
+  return isColorModeReliable;
+}
+
 function useCannyTheme() {
   const {colorMode} = useColorMode();
+  const isColorModeReliable = useIsColorModeReliable();
+  if (!isColorModeReliable) {
+    return null;
+  }
   return colorMode === 'light' ? 'light' : 'dark';
 }
 
@@ -27,6 +44,9 @@ function CannyWidget({basePath}: {basePath: string}) {
 
   const theme = useCannyTheme();
   useEffect(() => {
+    if (!theme) {
+      return;
+    }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const {Canny} = window as any;
     Canny('render', {
@@ -35,6 +55,7 @@ function CannyWidget({basePath}: {basePath: string}) {
       theme,
     });
   }, [basePath, theme]);
+
   return (
     <main
       key={theme} // widget needs a full reset: unable to update the theme