Modal

function MyModal(props) {
  const [lazyComponent, setLazyComponent] = React.useState(null)
  React.useEffect(() => {
    if (props.open) {
      setTimeout(() => {
        setLazyComponent(<Input />)
      }, 3000)
    }
    return () => setLazyComponent(null)
  }, [props.open])
  return (
    <Modal id="modal" closeOnOutsideClick height={200} {...props}>
      <StackView spacing={2}>
        {lazyComponent || <Text>Loading lazy component...</Text>}
        <Select
          emptyValue=""
          tooltip={{ title: 'Select a number' }}
          onChange={(e) => console.log(e)}
        >
          {generateRange(100).map((number) => (
            <Select.Option key={number} value={number}>
              {number}
            </Select.Option>
          ))}
        </Select>
      </StackView>
      <StackView
        axis="horizontal"
        distribution="end"
        marginVertical={1}
        spacing={1}
      >
        <Button title="Cancel" variant="naked" onClick={props.onRequestClose} />
        <Button title="Submit" theme="primary" />
      </StackView>
    </Modal>
  )
}
render(() => {
  const [open, setOpen] = React.useState(false)
  return (
    <React.Fragment>
      <Button
        title="Open modal"
        theme="primary"
        onClick={() => setOpen(true)}
      />
      <MyModal open={open} onRequestClose={() => setOpen(false)} />
    </React.Fragment>
  )
})