- A fix for https://github.com/owncast/owncast/issues/1007. Hide app container when configdata is loading

- Also, disable global CSS transition animations for now. If we want to add transitions onto anything, we can target specific elements and add styles individually intead.

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,

webroot/styles/app.css

@@ -37,9 +37,8 @@ a:hover {
   scrollbar-width: none; /* moz only */
 }
 
-
+#app-container.config-loading {
-#app-container * {
+  visibility: hidden;
-  transition: all .25s;
 }
 
 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 main,
-.chat #stream-info,
+.chat footer,
 .chat #user-content {
   width: var(--content-width);
 }
@@ -287,4 +286,4 @@ header {
 
 #external-modal-iframe {
   height: 70vh;
-}
+}