diff --git a/webroot/js/app.js b/webroot/js/app.js
index ac18e1bf9..744dedb7d 100644
--- a/webroot/js/app.js
+++ b/webroot/js/app.js
@@ -58,11 +58,12 @@ export default class App extends Component {
       websocket: new Websocket(),
       displayChat: chatStorage === null ? true : chatStorage,
       chatInputEnabled: false, // chat input box state
-      chatDisabled: false,
       username: getLocalStorage(KEY_USERNAME) || generateUsername(),
       touchKeyboardActive: false,
 
-      configData: {},
+      configData: {
+        loading: true,
+      },
       extraPageContent: '',
 
       playerActive: false, // player object is active
@@ -541,6 +542,7 @@ export default class App extends Component {
     const usernameStyle = chatDisabled ? 'none' : 'flex';
 
     const extraAppClasses = classNames({
+      'config-loading': configData.loading,
       chat: shouldDisplayChat,
       'no-chat': !shouldDisplayChat,
       'single-col': singleColMode,
diff --git a/webroot/styles/app.css b/webroot/styles/app.css
index 3929b25eb..da23aea91 100644
--- a/webroot/styles/app.css
+++ b/webroot/styles/app.css
@@ -37,9 +37,8 @@ a:hover {
   scrollbar-width: none; /* moz only */
 }
 
-
-#app-container * {
-  transition: all .25s;
+#app-container.config-loading {
+  visibility: hidden;
 }
 
 button[disabled] {
@@ -150,7 +149,6 @@ header {
 
 /* *********** overrides when chat is off ***************************** */
 
-
 .no-chat footer {
   justify-content: center;
 }
@@ -159,7 +157,8 @@ header {
   opacity: .75;
 }
 
-.no-chat #chat-container-wrap {
+/* hide chat by default */
+#chat-container-wrap {
   display: none;
 }
 
@@ -172,8 +171,8 @@ header {
   display: block;
 }
 
-.chat #video-container,
-.chat #stream-info,
+.chat main,
+.chat footer,
 .chat #user-content {
   width: var(--content-width);
 }
@@ -287,4 +286,4 @@ header {
 
 #external-modal-iframe {
   height: 70vh;
-}
\ No newline at end of file
+}