fixed astronaut color

Author: bennobuilder

src/_pages/LandingPage/components/HeaderView/components/Astronaut/index.tsx

@@ -24,6 +24,18 @@ const Astronaut: React.FC<Props> = (props) => {
   });
   const dark = useAgile(core.ui.ASTRONAUT_DARK);
 
+  const [mounted, setMounted] = useState(false);
+  // The astronaut theme on SSR is always the default theme but the site theme
+  // can be in a different mode. React hydration doesn't update DOM styles
+  // that come from SSR. Hence force a re-render after mounting to apply the
+  // current relevant styles. There will be a flash seen of the original
+  // styles seen using this current approach but that's probably ok. Fixing
+  // the flash will require changing the theming approach and is not worth it
+  // at this point.
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
   useEffect(() => {
     if (!isRaised) return;
 
@@ -50,7 +62,7 @@ const Astronaut: React.FC<Props> = (props) => {
   };
 
   return (
-    <div className={clsx(styles.Container, className)}>
+    <div key={String(mounted)} className={clsx(styles.Container, className)}>
       <animated.div
         style={animated_Astronaut}
         className={styles.ImageContainer}>