Show a spinner while waiting for a poll to be created (#7189)

pull/21833/head
Andy Balaam 2021-11-23 14:19:48 +00:00 committed by GitHub
parent 359962af6c
commit aec09dcad2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 1 deletions

View File

@ -15,6 +15,16 @@ limitations under the License.
*/
.mx_PollCreateDialog {
.mx_PollCreateDialog_busy {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: rgba($background, 0.6);
z-index: 1;
}
h2 {
font-weight: 600;
font-size: $font-15px;

View File

@ -23,6 +23,7 @@ import { arrayFastClone, arraySeed } from "../../../utils/arrays";
import Field from "./Field";
import AccessibleButton from "./AccessibleButton";
import { makePollContent, POLL_KIND_DISCLOSED, POLL_START_EVENT_TYPE } from "../../../polls/consts";
import Spinner from "./Spinner";
interface IProps extends IDialogProps {
room: Room;
@ -118,6 +119,7 @@ export default class PollCreateDialog extends ScrollableBaseModal<IProps, IState
placeholder={_t("Write something...")}
onChange={this.onQuestionChange}
usePlaceholderAsHint={true}
disabled={this.state.busy}
/>
<h2>{ _t("Create options") }</h2>
{
@ -129,20 +131,26 @@ export default class PollCreateDialog extends ScrollableBaseModal<IProps, IState
placeholder={_t("Write an option")}
onChange={e => this.onOptionChange(i, e)}
usePlaceholderAsHint={true}
disabled={this.state.busy}
/>
<AccessibleButton
onClick={() => this.onOptionRemove(i)}
className="mx_PollCreateDialog_removeOption"
disabled={this.state.busy}
/>
</div>)
}
<AccessibleButton
onClick={this.onOptionAdd}
disabled={this.state.options.length >= MAX_OPTIONS}
disabled={this.state.busy || this.state.options.length >= MAX_OPTIONS}
kind="secondary"
className="mx_PollCreateDialog_addOption"
inputRef={this.addOptionRef}
>{ _t("Add option") }</AccessibleButton>
{
this.state.busy &&
<div className="mx_PollCreateDialog_busy"><Spinner /></div>
}
</div>;
}
}