Fix fadein spinner placement on AppTileBody (#10970)

Author: luixxiul

res/css/views/rooms/_AppsDrawer.pcss

@@ -266,6 +266,19 @@ limitations under the License.
         width: 100%;
         height: 100%;
     }
+
+    /* const loadingElement */
+    .mx_AppTileBody_fadeInSpinner {
+        /* place spinner and the message at the center of mx_AppTileBody */
+        height: 100%;
+        width: 100%;
+
+        font-weight: bold; /* message next to the spinner */
+        animation-fill-mode: backwards;
+        animation-duration: 200ms;
+        animation-delay: 500ms;
+        animation-name: mx_AppTileBody_fadeInSpinnerAnimation;
+    }
 }
 
 .mx_AppTileBody {
@@ -324,22 +337,9 @@ limitations under the License.
     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;
-        }
-    }
 }
 
-@keyframes mx_AppTile_loading_fadeInSpinnerAnimation {
+@keyframes mx_AppTileBody_fadeInSpinnerAnimation {
     from {
         opacity: 0;
     }

src/components/views/elements/AppTile.tsx

@@ -606,7 +606,7 @@ export default class AppTile extends React.Component<IProps, IState> {
         }
 
         const loadingElement = (
-            <div className="mx_AppTile_loading_fadeInSpinner">
+            <div className="mx_AppTileBody_fadeInSpinner">
                 <Spinner message={_t("Loading…")} />
             </div>
         );

test/components/views/elements/__snapshots__/AppTile-test.tsx.snap

@@ -46,7 +46,7 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
           class="mx_AppTileBody mx_AppTile_loading"
         >
           <div
-            class="mx_AppTile_loading_fadeInSpinner"
+            class="mx_AppTileBody_fadeInSpinner"
           >
             <div
               class="mx_Spinner"