fix: Added a label to describe why breakout join takes long time

bigbluebutton-html5/imports/ui/components/breakout-join-confirmation/component.jsx

@@ -39,6 +39,10 @@ const intlMessages = defineMessages({
     id: 'app.breakoutJoinConfirmation.dismissDesc',
     description: 'adds context to dismiss option',
   },
+  generatingURL: {
+    id: 'app.createBreakoutRoom.generatingURLMessage',
+    description: 'label for generating breakout room url',
+  },
 });
 
 const propTypes = {
@@ -54,12 +58,15 @@ const propTypes = {
   breakoutName: PropTypes.string.isRequired,
 };
 
+let interval = null;
+
 class BreakoutJoinConfirmation extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
       selectValue: props.breakout.breakoutId,
+      waiting: false,
     };
 
     this.handleJoinBreakoutConfirmation = this.handleJoinBreakoutConfirmation.bind(this);
@@ -122,7 +129,7 @@ class BreakoutJoinConfirmation extends Component {
     mountModal(null);
   }
 
-  handleSelectChange(e) {
+  async handleSelectChange(e) {
     const { value } = e.target;
     const {
       requestJoinURL,
@@ -132,12 +139,30 @@ class BreakoutJoinConfirmation extends Component {
     this.setState({ selectValue: value });
     if (!getURL(value)) {
       requestJoinURL(value);
+
+      this.setState({
+        waiting: true,
+      })
+      await new Promise((resolve) => {
+
+        interval = setInterval(() => {
+          const temp = getURL(value);
+          if (temp !== "") {
+
+            resolve();
+            clearInterval(interval)
+            this.setState({
+              waiting: false,
+            })
+          }
+        }, 1000)
+      })
     }
   }
 
   renderSelectMeeting() {
     const { breakouts, intl } = this.props;
-    const { selectValue } = this.state;
+    const { selectValue, waiting, } = this.state;
     return (
       <div className={styles.selectParent}>
         {`${intl.formatMessage(intlMessages.freeJoinMessage)}`}
@@ -145,6 +170,7 @@ class BreakoutJoinConfirmation extends Component {
           className={styles.select}
           value={selectValue}
           onChange={this.handleSelectChange}
+          disabled={waiting}
         >
           {
             breakouts.map(({ name, breakoutId }) => (
@@ -157,12 +183,14 @@ class BreakoutJoinConfirmation extends Component {
             ))
           }
         </select>
+        { waiting ? <span>{intl.formatMessage(intlMessages.generatingURL)}</span> : null}
       </div>
     );
   }
 
   render() {
     const { intl, breakoutName, isFreeJoin } = this.props;
+    const { waiting } = this.state;
 
     return (
       <Modal
@@ -172,6 +200,7 @@ class BreakoutJoinConfirmation extends Component {
           label: intl.formatMessage(intlMessages.confirmLabel),
           description: intl.formatMessage(intlMessages.confirmDesc),
           icon: 'popout_window',
+          disabled: waiting,
         }}
         dismiss={{
           label: intl.formatMessage(intlMessages.dismissLabel),

bigbluebutton-html5/public/locales/en.json

@@ -769,6 +769,7 @@
     "app.createBreakoutRoom.ariaTitle": "Hide Breakout Rooms",
     "app.createBreakoutRoom.breakoutRoomLabel": "Breakout Rooms {0}",
     "app.createBreakoutRoom.generatingURL": "Generating URL",
+    "app.createBreakoutRoom.generatingURLMessage": "We are generating a join URL for the selected breakout room. It may take a few seconds..",
     "app.createBreakoutRoom.generatedURL": "Generated",
     "app.createBreakoutRoom.duration": "Duration {0}",
     "app.createBreakoutRoom.room": "Room {0}",