Update `mx_AppLoading` to improve maintainability (#10783)

* Nesting: mx_AppLoading

* Conform class and animation name to the naming policy

* Nesting for maintainability, preventing the rule from becoming an orphan

* Rename the class: mx_AppLoading to mx_AppTile_loading

res/css/views/rooms/_AppsDrawer.pcss

@@ -379,7 +379,7 @@ $MinWidth: 240px;
     }
 }
 
-.mx_AppLoading {
+.mx_AppTile_loading {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -391,24 +391,26 @@ $MinWidth: 240px;
     /* match bg of border so that the cut corners have the right fill */
     background-color: $widget-body-bg-color !important;
     border-radius: 8px;
+
+    iframe {
+        display: none;
+    }
+
+    /* const loadingElement */
+    .mx_AppTile_loading_fadeInSpinner {
+        animation-fill-mode: backwards;
+        animation-duration: 200ms;
+        animation-delay: 500ms;
+        animation-name: mx_AppTile_loading_fadeInSpinnerAnimation;
+
+        .mx_Spinner {
+            position: absolute;
+            inset: 0;
+        }
+    }
 }
 
-.mx_AppLoading .mx_Spinner {
+@keyframes mx_AppTile_loading_fadeInSpinnerAnimation {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-}
-
-.mx_AppLoading_spinner_fadeIn {
-    animation-fill-mode: backwards;
-    animation-duration: 200ms;
-    animation-delay: 500ms;
-    animation-name: mx_AppLoading_spinner_fadeIn_animation;
-}
-
-@keyframes mx_AppLoading_spinner_fadeIn_animation {
     from {
         opacity: 0;
     }
@@ -417,10 +419,6 @@ $MinWidth: 240px;
     }
 }
 
-.mx_AppLoading iframe {
-    display: none;
-}
-
 .mx_AppsDrawer_resizing .mx_AppTile_persistedWrapper {
     z-index: 1;
 }

src/components/views/elements/AppTile.tsx

@@ -573,7 +573,7 @@ export default class AppTile extends React.Component<IProps, IState> {
         }
 
         const loadingElement = (
-            <div className="mx_AppLoading_spinner_fadeIn">
+            <div className="mx_AppTile_loading_fadeInSpinner">
                 <Spinner message={_t("Loading…")} />
             </div>
         );
@@ -603,7 +603,7 @@ export default class AppTile extends React.Component<IProps, IState> {
         } else if (this.state.initialising || !this.state.isUserProfileReady) {
             appTileBody = (
                 <div
-                    className={appTileBodyClass + (this.state.loading ? "mx_AppLoading" : "")}
+                    className={appTileBodyClass + (this.state.loading ? "mx_AppTile_loading" : "")}
                     style={appTileBodyStyles}
                 >
                     {loadingElement}
@@ -619,7 +619,7 @@ export default class AppTile extends React.Component<IProps, IState> {
             } else {
                 appTileBody = (
                     <div
-                        className={appTileBodyClass + (this.state.loading ? "mx_AppLoading" : "")}
+                        className={appTileBodyClass + (this.state.loading ? "mx_AppTile_loading" : "")}
                         style={appTileBodyStyles}
                     >
                         {this.state.loading && loadingElement}