From a3a2c113bedc4e2489b51a277a7c8213a97391f2 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Tue, 15 Feb 2022 16:21:21 +0530
Subject: [PATCH] Use custom loader
---
src/loader.css | 71 ++++++++++++++++++++++++++++++++
src/style.css | 45 ++++++++++++++++----
src/ui/views/AccountSetupView.ts | 5 ++-
src/ui/views/ChatterboxView.ts | 3 +-
src/ui/views/LoadingView.ts | 12 ++++++
5 files changed, 124 insertions(+), 12 deletions(-)
create mode 100644 src/loader.css
create mode 100644 src/ui/views/LoadingView.ts
diff --git a/src/loader.css b/src/loader.css
new file mode 100644
index 0000000..dd1f243
--- /dev/null
+++ b/src/loader.css
@@ -0,0 +1,71 @@
+/**
+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);
+ }
+}
diff --git a/src/style.css b/src/style.css
index 33861c8..452484e 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,3 +1,5 @@
+@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;
+}
diff --git a/src/ui/views/AccountSetupView.ts b/src/ui/views/AccountSetupView.ts
index 145f692..e1c4674 100644
--- a/src/ui/views/AccountSetupView.ts
+++ b/src/ui/views/AccountSetupView.ts
@@ -1,6 +1,7 @@
-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) {
diff --git a/src/ui/views/ChatterboxView.ts b/src/ui/views/ChatterboxView.ts
index fb33c36..35304f0 100644
--- a/src/ui/views/ChatterboxView.ts
+++ b/src/ui/views/ChatterboxView.ts
@@ -1,7 +1,8 @@
-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) {
diff --git a/src/ui/views/LoadingView.ts b/src/ui/views/LoadingView.ts
new file mode 100644
index 0000000..ed477d3
--- /dev/null
+++ b/src/ui/views/LoadingView.ts
@@ -0,0 +1,12 @@
+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")
+ ]);
+ }
+}
--
GitLab