mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-21 16:55:34 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fix fadein spinner placement on AppTileBody (#10970)

Browse source
This commit is contained in:
Suguru Hirahara 2023-06-01 15:17:28 +00:00 committed by GitHub
parent 610ee53257
commit 43d9e30673
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
res/css/views/rooms/_AppsDrawer.pcss
View file

@ -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;
}

2
src/components/views/elements/AppTile.tsx
View file

@ -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>
);

2
test/components/views/elements/__snapshots__/AppTile-test.tsx.snap
View file

@ -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"