modals: avoid mounting the component when not visible

Currently the modal with semantic-ui is in this form (a button inside the modal):
```
{
this.setState({ modalOpen: true });
}

handleClose() => {
this.setState({ modalOpen: false });
}

render() => {
Show Modal
{this.state.modalOpen && ()
}
```

There might be another better solution.

**TODO**
- fix the way we use modals
- find and fix all modals in the app

Ping @zzacharo @kprzerwa @topless if you have better ideas.

Start by locating RelationModal and the other modal usages in the app; reproduce the page with two modals and observe the render logs described in the issue. Done means hidden modals are not mounted or re-rendered, while opening and closing still works for every modal usage.

Written by the indexing model from the issue text.