From 5e045cd85e7c5c657c5c00a7e6e0f5e48708996d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Mon, 20 Dec 2021 13:41:06 +0100
Subject: [PATCH] don't render before allTypeEntries loaded, unify spinner look

---
 ui/src/App.svelte                | 11 +++++-
 ui/src/components/Inspect.svelte | 64 +++++++++++++++++---------------
 ui/src/views/Home.svelte         | 10 +----
 3 files changed, 47 insertions(+), 38 deletions(-)

diff --git a/ui/src/App.svelte b/ui/src/App.svelte
index 5c0b1ea..d2721a0 100644
--- a/ui/src/App.svelte
+++ b/ui/src/App.svelte
@@ -42,7 +42,7 @@
   @import url("/assets/fonts/inter.css");
 
   $primary: #2c3e50;
-  $primary-lighter: #394F66;
+  $primary-lighter: #394f66;
   $background: white;
 
   html {
@@ -129,4 +129,13 @@
   a:visited {
     color: var(--foreground);
   }
+
+  sl-spinner {
+    font-size: 2em;
+    --track-width: 6px;
+
+    position: relative;
+    left: 50%;
+    transform: translateX(-50%);
+  }
 </style>
diff --git a/ui/src/components/Inspect.svelte b/ui/src/components/Inspect.svelte
index 5eea08b..387ef7f 100644
--- a/ui/src/components/Inspect.svelte
+++ b/ui/src/components/Inspect.svelte
@@ -83,41 +83,47 @@
   <h2>
     {#if $entity}
       <Address banner {address} />
+    {:else}
+      <sl-spinner />
     {/if}
   </h2>
   <BlobPreview {address} />
   {#if !$error}
-    <div class="attributes">
-      {#each Object.entries(typedAttributes) as [typeAddr, entries] (typeAddr)}
-        <AttributeView
-          {address}
-          {entries}
-          type={allTypes[typeAddr]}
-          {editable}
-          on:changed={revalidate}
-        />
-      {/each}
+    {#if Boolean($allTypeEntries)}
+      <div class="attributes">
+        {#each Object.entries(typedAttributes) as [typeAddr, entries] (typeAddr)}
+          <AttributeView
+            {address}
+            {entries}
+            type={allTypes[typeAddr]}
+            {editable}
+            on:changed={revalidate}
+          />
+        {/each}
 
-      {#if untypedAttributes.length > 0 || editable}
-        <AttributeView
-          title="Other attributes"
-          {editable}
-          {address}
-          entries={untypedAttributes}
-          on:changed={revalidate}
-        />
-      {/if}
+        {#if untypedAttributes.length > 0 || editable}
+          <AttributeView
+            title="Other attributes"
+            {editable}
+            {address}
+            entries={untypedAttributes}
+            on:changed={revalidate}
+          />
+        {/if}
 
-      {#if $entity?.backlinks.length > 0}
-        <AttributeView
-          title={`Referred to (${$entity.backlinks.length})`}
-          {address}
-          entries={$entity.backlinks}
-          reverse
-          on:changed={revalidate}
-        />
-      {/if}
-    </div>
+        {#if $entity?.backlinks.length > 0}
+          <AttributeView
+            title={`Referred to (${$entity.backlinks.length})`}
+            {address}
+            entries={$entity.backlinks}
+            reverse
+            on:changed={revalidate}
+          />
+        {/if}
+      </div>
+    {:else}
+      <sl-spinner />
+    {/if}
   {:else}
     <div class="error">
       {JSON.stringify($error)}
diff --git a/ui/src/views/Home.svelte b/ui/src/views/Home.svelte
index 397effb..27381a3 100644
--- a/ui/src/views/Home.svelte
+++ b/ui/src/views/Home.svelte
@@ -39,7 +39,7 @@
   <section class="roots">
     <h2>Roots</h2>
     {#await roots}
-      <sl-spinner style="font-size: 3rem; --track-width: 6px" />
+      <sl-spinner />
     {:then data}
       <ul>
         {#each data as root}
@@ -63,7 +63,7 @@
   <section class="latest">
     <h2>Most recently added files</h2>
     {#await latestFiles}
-      <sl-spinner style="font-size: 3rem; --track-width: 6px" />
+      <sl-spinner />
     {:then data}
       <table>
         {#each data as file}
@@ -98,12 +98,6 @@
     }
   }
 
-  sl-spinner {
-    position: relative;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
   .roots {
     ul {
       list-style: none;