diff --git a/lib/Styles/globe.gif b/lib/Styles/globe.gif
index 6fbc0aac2..b523d4255 100644
Binary files a/lib/Styles/globe.gif and b/lib/Styles/globe.gif differ
diff --git a/lib/Views/Loader.tsx b/lib/Views/Loader.tsx
index 66ac61fd5..d48d2d3f8 100644
--- a/lib/Views/Loader.tsx
+++ b/lib/Views/Loader.tsx
@@ -1,6 +1,8 @@
import globeGif from "../Styles/globe.gif";
import Styles from "./loader.scss";
+const loadingStr = "Loading the globe";
+
export const Loader = () => {
return (
{
backgroundColor: "#383F4D"
}}
>
-

+
+

+
{loadingStr}
+
);
};
diff --git a/lib/Views/loader.scss b/lib/Views/loader.scss
index f73795363..5e464efa5 100644
--- a/lib/Views/loader.scss
+++ b/lib/Views/loader.scss
@@ -1,19 +1,3 @@
-.loader-ui img {
- display: block;
- margin: calc(50vh - 150px) auto;
-}
-
-@media (min-width: 768px) {
- .loader-ui {
- display: flex;
- position: fixed;
- left: 0;
- top: 0;
- width: 100vw;
- height: 100vh;
- }
-}
-
.loader-ui {
transition: opacity, 2s;
opacity: 1;
@@ -24,8 +8,22 @@
left: 0;
top: 0;
pointer-events: none;
+ display: flex;
}
.loader-ui-hide {
opacity: 0;
}
+
+.loader-ui-container {
+ margin: calc(50vh - 150px) auto;
+ text-align: center;
+}
+
+.loader-ui-text {
+ color: #686d79;
+ font-family: sans-serif;
+ font-weight: bold;
+ position: relative;
+ top: -30%;
+}
diff --git a/lib/Views/loader.scss.d.ts b/lib/Views/loader.scss.d.ts
index b166a946e..42c508a6f 100644
--- a/lib/Views/loader.scss.d.ts
+++ b/lib/Views/loader.scss.d.ts
@@ -1,9 +1,13 @@
declare namespace LoaderScssNamespace {
export interface ILoaderScss {
"loader-ui": string;
+ "loader-ui-container": string;
"loader-ui-hide": string;
+ "loader-ui-text": string;
loaderUi: string;
+ loaderUiContainer: string;
loaderUiHide: string;
+ loaderUiText: string;
}
}