diff --git a/app/index.ejs b/app/index.ejs
index 51711f0c35..8229b0ef88 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 87c0bf9af8..de06489ceb 100644
Binary files a/app/soapbox/components/loading_indicator.js and b/app/soapbox/components/loading_indicator.js differ
diff --git a/app/soapbox/features/ui/components/column_loading.js b/app/soapbox/features/ui/components/column_loading.js
index 9d5ba9e551..7e710f2e35 100644
Binary files a/app/soapbox/features/ui/components/column_loading.js and b/app/soapbox/features/ui/components/column_loading.js differ
diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss
index 744e734d36..4ba678ca2a 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 45145d1f21..c7b8c77cbe 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 {