Use custom loader

src/loader.css

+/**
+The MIT License (MIT)
+
+Copyright (c) 2014 Luke Haas
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+**/
+
+/* generated via https://projects.lukehaas.me/css-loaders/ */
+
+.loader,
+.loader:after {
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+}
+
+.loader {
+    margin: 60px auto;
+    font-size: 4px;
+    position: relative;
+    text-indent: -9999em;
+    border-top: 1.1em solid #E3E8F0;
+    border-right: 1.1em solid #E3E8F0;
+    border-bottom: 1.1em solid #E3E8F0;
+    border-left: 1.1em solid var(--main-bg-color);
+    -webkit-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    transform: translateZ(0);
+    -webkit-animation: load8 1.1s infinite linear;
+    animation: load8 1.1s infinite linear;
+}
+
+@-webkit-keyframes load8 {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes load8 {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}

src/style.css

+@import url("./loader.css");
+
 :root {
     --main-bg-color: #5C56F5;
 }
@@ -22,15 +24,6 @@ body {
     pointer-events: none;
 }
 
-#chatterbox .LoadingView {
-    flex-direction: column;
-    gap: 12px;
-}
-
-#chatterbox .spinner {
-    color: var(--main-bg-color);
-}
-
 /*
 todo: this style should actually be in hydrogen-web
 */
@@ -215,3 +208,37 @@ todo: this style should actually be in hydrogen-web
     display: flex;
     justify-content: center;
 }
+
+.ChatterboxLoadingView {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.AccountSetupView .ChatterboxLoadingView {
+    height: 311px;
+}
+
+.ChatterboxView .ChatterboxLoadingView {
+    height: 100%;
+}
+
+.LoadingText {
+    margin-top: 8px;
+    font-weight: 600;
+    font-size: 15px;
+    line-height: 24px;
+}
+
+.chatterbox-spinner {
+    width: 64px;
+    height: 64px;
+    background: #fff;
+    border: 1px solid #E3E8F0;
+    box-sizing: border-box;
+    border-radius: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}

src/ui/views/AccountSetupView.ts

-import { TemplateView, LoadingView } from "hydrogen-view-sdk";
+import { TemplateView } from "hydrogen-view-sdk";
 import { AccountSetupViewModel } from "../../viewmodels/AccountSetupViewModel";
-// import { LoadingView } from "./LoadingView";
+import { LoadingView } from "./LoadingView";
+
 import { FooterView } from "./FooterView";
 export class AccountSetupView extends TemplateView<AccountSetupViewModel> {
     constructor(value) {

src/ui/views/ChatterboxView.ts

-import { TemplateView, TimelineView, AvatarView, LoadingView } from "hydrogen-view-sdk";
+import { TemplateView, TimelineView, AvatarView } from "hydrogen-view-sdk";
 import { MessageComposer } from "hydrogen-view-sdk";
 import { ChatterboxViewModel } from "../../viewmodels/ChatterboxViewModel";
 import { FooterView } from "./FooterView";
+import { LoadingView } from "./LoadingView";
 
 export class ChatterboxView extends TemplateView<ChatterboxViewModel> {
     constructor(value) {

src/ui/views/LoadingView.ts

+import { TemplateView } from "hydrogen-view-sdk";
+
+export class LoadingView extends TemplateView {
+    render(t) {
+        return t.div({ className: "ChatterboxLoadingView" }, [
+            t.div({ className: "chatterbox-spinner" }, [
+                t.div({ className: "loader" }),
+            ]),
+            t.span({className: "LoadingText"}, "Loading")
+        ]);
+    }
+}