diff --git a/app/index.ejs b/app/index.ejs
index 51711f0c3..8229b0ef8 100644
--- a/app/index.ejs
+++ b/app/index.ejs
@@ -11,7 +11,9 @@
diff --git a/app/soapbox/components/loading_indicator.js b/app/soapbox/components/loading_indicator.js
index 87c0bf9af..de06489ce 100644
--- a/app/soapbox/components/loading_indicator.js
+++ b/app/soapbox/components/loading_indicator.js
@@ -3,7 +3,9 @@ import { FormattedMessage } from 'react-intl';
const LoadingIndicator = () => (
);
diff --git a/app/soapbox/features/ui/components/column_loading.js b/app/soapbox/features/ui/components/column_loading.js
index 9d5ba9e55..7e710f2e3 100644
--- a/app/soapbox/features/ui/components/column_loading.js
+++ b/app/soapbox/features/ui/components/column_loading.js
@@ -1,7 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
-
-import Column from '../../../components/column';
+import Column from './column';
import ColumnHeader from '../../../components/column_header';
import ImmutablePureComponent from 'react-immutable-pure-component';
import LoadingIndicator from 'soapbox/components/loading_indicator';
@@ -23,7 +22,9 @@ export default class ColumnLoading extends ImmutablePureComponent {
return (
-
+
+
+
);
}
diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss
index 744e734d3..4ba678ca2 100644
--- a/app/styles/components/columns.scss
+++ b/app/styles/components/columns.scss
@@ -867,3 +867,13 @@
.column-list {
position: relative;
}
+
+.column-loading {
+ background-color: var(--foreground-color);
+ display: flex;
+ position: relative;
+ align-items: center;
+ justify-content: center;
+ padding: 15px;
+ border-radius: 0 0 10px 10px;
+}
diff --git a/app/styles/loading.scss b/app/styles/loading.scss
index 45145d1f2..c7b8c77cb 100644
--- a/app/styles/loading.scss
+++ b/app/styles/loading.scss
@@ -4,20 +4,24 @@
font-weight: 400;
text-transform: uppercase;
overflow: visible;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
span {
display: block;
- float: left;
- transform: translateX(-50%);
- margin: 82px 0 0 50%;
+ margin-top: 10px;
white-space: nowrap;
}
}
+.loading-indicator__container {
+ width: 42px;
+ height: 42px;
+ position: relative;
+}
+
.loading-indicator__figure {
position: absolute;
top: 50%;
@@ -41,8 +45,14 @@
animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
-.app-body--loading .loading-indicator__figure {
- border-color: #ddd;
+.app-body--loading .loading-indicator {
+ width: 100vw;
+ height: 100vh;
+ align-items: center;
+
+ &__figure {
+ border-color: #ddd;
+ }
}
@keyframes loader-figure {