diff --git a/bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss b/bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss
index 5055a9eef86264120ee4dd1b0e9e8f582894c9ad..d7cb8563b998cd54380ed764f930f03dadd6504b 100755
--- a/bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss
@@ -110,15 +110,11 @@
   [dir="rtl"] & {
     text-align: right;
   }
-
-  &:before {
-    content: "\00a0"; // non-breaking space
-  }
 }
 
 .spacer {
   &:before {
-    content: none;
+    content: "\00a0"; // non-breaking space
   }
 }
 
diff --git a/bigbluebutton-html5/imports/ui/components/chat/message-form/typing-indicator/component.jsx b/bigbluebutton-html5/imports/ui/components/chat/message-form/typing-indicator/component.jsx
index aa0195b5644b19a233c99f9921ea6ca65bc4dd22..45887ee41eba556855767c0f7823de938cf4b324 100644
--- a/bigbluebutton-html5/imports/ui/components/chat/message-form/typing-indicator/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/chat/message-form/typing-indicator/component.jsx
@@ -94,16 +94,19 @@ class TypingIndicator extends PureComponent {
   render() {
     const {
       error,
+      indicatorEnabled,
     } = this.props;
 
-    const style = {};
-    style[styles.error] = !!error;
-    style[styles.info] = !error;
-    style[styles.spacer] = !!this.renderTypingElement();
+    const typingElement = this.renderTypingElement();
+
+    const showSpacer = (indicatorEnabled ? !typingElement : !error);
 
     return (
-      <div className={cx(style)}>
-        <span className={styles.typingIndicator}>{error || this.renderTypingElement()}</span>
+      <div className={cx(styles.info, (showSpacer && styles.spacer))}>
+        <div className={styles.typingIndicator}>{typingElement}</div>
+        {error
+          && <div className={cx(styles.typingIndicator, styles.error)}>{error}</div>
+        }
       </div>
     );
   }