more preview polish

css/preview.css

@@ -50,29 +50,28 @@
     margin: 8px 0;
 }
 
-.PreviewView .memberCount p {
-}
 
 .PreviewView .memberCount.loading {
     margin: 16px 0;
 }
 
 .PreviewView .memberCount p {
+    font-size: 12px;
+    margin: 0;
+}
+
+.PreviewView .memberCount p:not(.placeholder) {
+    padding: 0 4px 0 24px;
+    border-radius: 8px;
     background-image: url(../images/member-icon.svg);
     background-repeat: no-repeat;
     background-position: 2px center;
-    padding: 0 4px 0 24px;
     background-color: var(--lightgrey);
-    border-radius: 8px;
-    font-size: 12px;
-    margin: 0;
 }
 
 .PreviewView .memberCount p.placeholder {
     height: 1.5em;
     width: 100px;
-    background-image: none;
-    padding: 0;
 }
 
 .PreviewView .topic {

src/preview/PreviewView.js

@@ -28,7 +28,7 @@ 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.h1(vm => vm.name),
             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}}, [

src/preview/PreviewViewModel.js

@@ -27,9 +27,9 @@ export class PreviewViewModel extends ViewModel {
 		this._link = link;
 		this._consentedServers = consentedServers;
 		this.loading = false;
-		this.name = null;
+		this.name = this._link.identifier;
 		this.avatarUrl = null;
-		this.identifier = this._link.identifier;
+		this.identifier = null;
 		this.memberCount = null;
 		this.topic = null;
 		this.previewDomain = null;