Rework some of the css var state to fix flaky customization UI. Fixes #2505

web/pages/admin/config/general/AppearanceConfig.tsx

@@ -24,38 +24,6 @@ interface AppearanceVariable {
   description: string;
 }
 
-function ColorPicker({
-  value,
-  name,
-  description,
-  onChange,
-}: {
-  value: string;
-  name: string;
-  description: string;
-  onChange: (name: string, value: string, description: string) => void;
-}) {
-  return (
-    <Col span={3} key={name}>
-      <input
-        type="color"
-        id={name}
-        name={description}
-        title={description}
-        value={value}
-        className={s.colorPicker}
-        onChange={e => onChange(name, e.target.value, description)}
-      />
-      <div style={{ padding: '2px' }}>{description}</div>
-    </Col>
-  );
-}
-export default function Appearance() {
-  const serverStatusData = useContext(ServerStatusContext);
-  const { serverConfig } = serverStatusData || {};
-  const { instanceDetails } = serverConfig;
-  const { appearanceVariables } = instanceDetails;
-
 const chatColorVariables = [
   { name: 'theme-color-users-0', description: '' },
   { name: 'theme-color-users-1', description: '' },
@@ -99,6 +67,50 @@ export default function Appearance() {
 
 const others = [{ name: 'theme-rounded-corners', description: 'Corner radius' }];
 
+// Create an object so these vars can be indexed by name.
+const allAvailableValues = [
+  ...paletteVariables,
+  ...componentColorVariables,
+  ...chatColorVariables,
+  ...others,
+].reduce((obj, val) => {
+  // eslint-disable-next-line no-param-reassign
+  obj[val.name] = { name: val.name, description: val.description };
+  return obj;
+}, {});
+
+function ColorPicker({
+  value,
+  name,
+  description,
+  onChange,
+}: {
+  value: string;
+  name: string;
+  description: string;
+  onChange: (name: string, value: string, description: string) => void;
+}) {
+  return (
+    <Col span={3} key={name}>
+      <input
+        type="color"
+        id={name}
+        name={description}
+        title={description}
+        value={value}
+        className={s.colorPicker}
+        onChange={e => onChange(name, e.target.value, description)}
+      />
+      <div style={{ padding: '2px' }}>{description}</div>
+    </Col>
+  );
+}
+export default function Appearance() {
+  const serverStatusData = useContext(ServerStatusContext);
+  const { serverConfig } = serverStatusData;
+  const { instanceDetails } = serverConfig;
+  const { appearanceVariables } = instanceDetails;
+
   const [colors, setColors] = useState<Record<string, AppearanceVariable>>();
   const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
 
@@ -127,11 +139,14 @@ export default function Appearance() {
   }, []);
 
   useEffect(() => {
-    if (!appearanceVariables || !colors) return;
+    if (Object.keys(appearanceVariables).length === 0) return;
 
-    const c = colors;
+    const c = colors || {};
     Object.keys(appearanceVariables).forEach(key => {
-      c[key] = { value: appearanceVariables[key], description: colors[key]?.description || '' };
+      c[key] = {
+        value: appearanceVariables[key],
+        description: allAvailableValues[key]?.description || '',
+      };
     });
     setColors(c);
   }, [appearanceVariables]);
@@ -179,16 +194,16 @@ export default function Appearance() {
     });
   };
 
-  if (!colors) {
-    return <div>Loading...</div>;
-  }
-
   const onBorderRadiusChange = (value: string) => {
     const variableName = 'theme-rounded-corners';
 
     updateColor(variableName, `${value.toString()}px`, '');
   };
 
+  if (!colors) {
+    return <div>Loading...</div>;
+  }
+
   return (
     <Space direction="vertical">
       <Title>Customize Appearance</Title>
@@ -203,6 +218,7 @@ export default function Appearance() {
               {componentColorVariables.map(colorVar => {
                 const { name } = colorVar;
                 const c = colors[name];
+
                 return (
                   <ColorPicker
                     key={name}