first round of styling for preview

src/open/OpenLinkView.js

@@ -22,14 +22,12 @@ export class OpenLinkView extends TemplateView {
 	render(t, vm) {
 		return t.div({className: "OpenLinkView card"}, [
 			t.view(new PreviewView(vm.previewViewModel)),
-			t.div({className: {hidden: vm => vm.previewLoading}}, [
-				t.p({className: {hidden: vm => vm.clientsViewModel}}, t.button({
-					className: "primary fullwidth",
-					onClick: () => vm.showClients()
-				}, vm => vm.showClientsLabel)),
-				t.mapView(vm => vm.clientsViewModel, childVM => childVM ? new ClientListView(childVM) : null),
-				t.p(["Preview provided by ", vm => vm.previewDomain]),
-			])
+			t.p({className: {accept: true, hidden: vm => vm.clientsViewModel}}, t.button({
+				className: "primary fullwidth",
+				onClick: () => vm.showClients()
+			}, vm => vm.showClientsLabel)),
+			t.mapView(vm => vm.clientsViewModel, childVM => childVM ? new ClientListView(childVM) : null),
+			t.p({className: {hidden: vm => !vm.previewDomain}}, ["Preview provided by ", vm => vm.previewDomain]),
 		]);
 	}
-}
+}

src/preview/PreviewView.js

@@ -19,18 +19,35 @@ import {ClientListView} from "../open/ClientListView.js";
 import {ClientView} from "../open/ClientView.js";
 
 export class PreviewView extends TemplateView {
+    render(t, vm) {
+        return t.mapView(vm => vm.loading, loading => loading ? new LoadingPreviewView(vm) : new LoadedPreviewView(vm));
+    }
+}
+
+class LoadingPreviewView extends TemplateView {
+    render(t, vm) {
+        return t.div({className: "PreviewView"}, [
+            t.div({className: "avatarContainer"}, t.div({className: "avatar loading"}, t.div({className: "spinner"}))),
+            t.h1(vm => vm.identifier),
+            t.p({className: "identifier placeholder"}),
+            t.div({className: {memberCount: true, loading: true, hidden: !vm.hasMemberCount}}, t.p({className: "placeholder"})),
+            t.p({className: {topic: true, loading: true, hidden: !vm.hasTopic}}, [
+                t.div({className: "placeholder"}),
+                t.div({className: "placeholder"}),
+                t.div({className: "placeholder"}),
+            ]),
+        ]);
+    }
+}
+
+class LoadedPreviewView extends TemplateView {
 	render(t, vm) {
 		return t.div({className: "PreviewView"}, [
-			t.h1({className: {hidden: vm => !vm.loading}}, "Loading preview…"),
-			t.div({className: {hidden: vm => vm.loading}}, [
-				t.div({className: "preview"}, [
-					t.p(t.img({className: "avatar", src: vm => vm.avatarUrl})),
-					t.h1(vm => vm.name),
-					t.p({className: "identifier"}, vm => vm.identifier),
-					t.p({className: {memberCount: true, hidden: vm => !vm.memberCount}}, [vm => vm.memberCount, " members"]),
-					t.p({className: {topic: true, hidden: vm => !vm.topic}}, [vm => vm.topic]),
-				]),
-			])
+			t.div({className: "avatarContainer"}, t.img({className: "avatar", src: vm => vm.avatarUrl})),
+			t.h1(vm => vm.name),
+			t.p({className: {identifier: true, hidden: vm => !vm.identifier}}, vm => vm.identifier),
+			t.div({className: {memberCount: true, hidden: vm => !vm.memberCount}}, t.p([vm => vm.memberCount, " members"])),
+			t.p({className: {topic: true, hidden: vm => !vm.topic}}, [vm => vm.topic]),
 		]);
 	}
 }

src/preview/PreviewViewModel.js

@@ -29,7 +29,7 @@ export class PreviewViewModel extends ViewModel {
 		this.loading = false;
 		this.name = null;
 		this.avatarUrl = null;
-		this.identifier = null;
+		this.identifier = this._link.identifier;
 		this.memberCount = null;
 		this.topic = null;
 		this.previewDomain = null;
@@ -38,6 +38,7 @@ export class PreviewViewModel extends ViewModel {
 	async load() {
 		this.loading = true;
 		this.emitChange();
+        // await new Promise(r => setTimeout(r, 5000));
 		for (const server of this._consentedServers) {
 			try {
 				const homeserver = await resolveServer(this.request, server);
@@ -51,15 +52,21 @@ export class PreviewViewModel extends ViewModel {
 				}
 				// assume we're done if nothing threw
 				this.previewDomain = server;
-				break;
+                this.loading = false;
+        		this.emitChange();
+                return;
 			} catch (err) {
 				continue;
 			}
 		}
-		this.loading = false;
-		this.emitChange();
+		this._setNoPreview(this._link);
+        this.loading = false;
+        this.emitChange();
 	}
 
+    get hasTopic() { return this._link.kind === LinkKind.Room; }
+    get hasMemberCount() { return this.hasTopic; }
+
 	async _loadUserPreview(homeserver, userId) {
 		const profile = await homeserver.getUserProfile(userId);
 		this.name = profile.displayname || userId;
@@ -87,4 +94,10 @@ export class PreviewViewModel extends ViewModel {
 		this.topic = publicRoom?.topic;
 		this.identifier = publicRoom?.canonical_alias || link.identifier;
 	}
-}
+
+    _setNoPreview(link) {
+        this.name = link.identifier;
+        this.identifier = null;
+        this.avatarUrl = "images/chat-icon.svg";
+    }
+}