Improving the value selector performance, only initializing it on activation

webapp/src/components/propertyValueElement.tsx

@@ -71,6 +71,7 @@ export default class PropertyValueElement extends React.Component<Props, State>
             }
             return (
                 <ValueSelector
+                    emptyValue={emptyDisplayValue}
                     options={propertyTemplate.options}
                     value={propertyTemplate.options.find((p) => p.id === propertyValue)}
                     onChange={(value) => {

webapp/src/widgets/valueSelector.scss

@@ -6,6 +6,13 @@
         background-color: rgba(var(--main-fg), 0.1),
     }
 
+    > .octo-label {
+        margin: 0 10px;
+        &.empty {
+            color: rgba(var(--main-fg), 0.6);
+        }
+    }
+
     .value-menu-option {
         display: flex;
         width: 100%;

webapp/src/widgets/valueSelector.tsx

@@ -19,6 +19,7 @@ import './valueSelector.scss'
 type Props = {
     options: IPropertyOption[]
     value: IPropertyOption;
+    emptyValue: string;
     onCreate?: (value: string) => void
     onChange?: (value: string) => void
     onChangeColor?: (option: IPropertyOption, color: string) => void
@@ -26,7 +27,18 @@ type Props = {
     intl: IntlShape
 }
 
-class ValueSelector extends React.Component<Props> {
+type State = {
+    activated: boolean
+}
+
+class ValueSelector extends React.Component<Props, State> {
+    public constructor(props: Props) {
+        super(props)
+        this.state = {
+            activated: false,
+        }
+    }
+
     public shouldComponentUpdate(): boolean {
         return true
     }
@@ -65,6 +77,18 @@ class ValueSelector extends React.Component<Props> {
     }
 
     public render(): JSX.Element {
+        if (!this.state.activated) {
+            return (
+                <div
+                    className='ValueSelector'
+                    onClick={() => this.setState({activated: true})}
+                >
+                    <span className={`octo-label ${this.props.value ? this.props.value.color : 'empty'}`}>
+                        {this.props.value ? this.props.value.value : this.props.emptyValue}
+                    </span>
+                </div>
+            )
+        }
         return (
             <CreatableSelect
                 styles={{
@@ -119,6 +143,8 @@ class ValueSelector extends React.Component<Props> {
                 autoFocus={true}
                 value={this.props.value}
                 closeMenuOnSelect={true}
+                placeholder={this.props.emptyValue}
+                defaultMenuIsOpen={true}
             />
         )
     }