From 6f3e7b16eb8a89bdfd466ef67bcb081359985554 Mon Sep 17 00:00:00 2001
From: Niko PLP <niko@nextgraph.org>
Date: Sun, 11 Aug 2024 12:53:22 +0300
Subject: [PATCH] spinners for data loading

---
 ng-app/src/apps/AutomergeEditor.svelte   | 47 ++++++++++---
 ng-app/src/apps/ContainerView.svelte     | 18 ++---
 ng-app/src/apps/PostMdViewer.svelte      | 32 ++++++++-
 ng-app/src/apps/ProseMirrorViewer.svelte | 32 ++++++++-
 ng-app/src/apps/TextViewer.svelte        | 30 ++++++++-
 ng-app/src/apps/YMapViewer.svelte        | 31 ++++++++-
 ng-app/src/lib/Document.svelte           | 84 ++++++++++++++++++++++--
 ng-app/src/routes/WalletCreate.svelte    |  4 +-
 ngaccount/web/src/routes/Create.svelte   |  2 +-
 9 files changed, 252 insertions(+), 28 deletions(-)

diff --git a/ng-app/src/apps/AutomergeEditor.svelte b/ng-app/src/apps/AutomergeEditor.svelte
index b3a3790..4f4653a 100644
--- a/ng-app/src/apps/AutomergeEditor.svelte
+++ b/ng-app/src/apps/AutomergeEditor.svelte
@@ -38,6 +38,7 @@
     export let readonly = false;
 
     let doc = {};
+    let loading = true;
 
     let safari_error = false;
 
@@ -87,6 +88,8 @@
             root_proxy = d;
         });
 
+        loading = false;
+
     });
 
     async function update(event) {
@@ -126,19 +129,47 @@
     {#if safari_error}
         <Alert class="m-2" color="red">{$t("errors.no_wasm_on_old_safari")}</Alert>
     {:else}
+        {#if loading}
+            <div class="mb-4 flex flex-col justify-center text-primary-700">
+                <svg
+                    class="animate-spin mt-4 h-10 w-10 mb-4 mx-auto"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                >
+                    <circle
+                    class="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    stroke-width="4"
+                    />
+                    <path
+                    class="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                    />
+                </svg>
+                <p class="text-center">{$t("connectivity.loading")}...</p>
+            </div>
+        {/if}
         {#if Object.keys(doc).length !== 0 || !readonly}
             <div class="grow mb-20" style="min-height:300px;">
                 <AMap {readonly} value={doc} {doc} on:update={update} on:updateText={updateText} proxy={root_proxy}/>
             </div>
         {:else if $cur_tab_doc_can_edit}
-            <button
-                on:click={edit}
-                on:keypress={edit}
-                class="select-none ml-4 mt-2 mb-10 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-500/50 rounded-lg text-base p-2 text-center inline-flex items-center dark:focus:ring-primary-700/55"
-            >
-                <PencilSquare class="mr-2 focus:outline-none" tabindex="-1" />
-                {$t("doc.start_editing")}
-            </button>
+            <div class="flex-row">
+                <button
+                    on:click={edit}
+                    on:keypress={edit}
+                    class="shrink select-none ml-4 mt-2 mb-10 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-500/50 rounded-lg text-base p-2 text-center inline-flex items-center dark:focus:ring-primary-700/55"
+                >
+                    <PencilSquare class="mr-2 focus:outline-none" tabindex="-1" />
+                    {$t("doc.start_editing")}
+                </button>
+            </div>
         {:else}
             <p class="ml-5">{$t("doc.empty")}</p>
         {/if}
diff --git a/ng-app/src/apps/ContainerView.svelte b/ng-app/src/apps/ContainerView.svelte
index eea99d8..ba0ca0e 100644
--- a/ng-app/src/apps/ContainerView.svelte
+++ b/ng-app/src/apps/ContainerView.svelte
@@ -50,14 +50,14 @@
       {#if commits.graph.length == 0 || contained(commits.graph).length == 0} 
         <p>{$t("doc.empty_container")}</p>
         {#if $cur_tab_doc_can_edit}
-        <button
-            on:click={create}
-            on:keypress={create}
-            class="select-none ml-0 mt-2 mb-10 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-500/50 rounded-lg text-base p-2 text-center inline-flex items-center dark:focus:ring-primary-700/55"
-        >
-            <PencilSquare tabindex="-1" class="mr-2 focus:outline-none" />
-            {$t("doc.create")}
-        </button>
-    {/if}
+            <button
+                on:click={create}
+                on:keypress={create}
+                class="select-none ml-0 mt-2 mb-10 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-500/50 rounded-lg text-base p-2 text-center inline-flex items-center dark:focus:ring-primary-700/55"
+            >
+                <PencilSquare tabindex="-1" class="mr-2 focus:outline-none" />
+                {$t("doc.create")}
+            </button>
+        {/if}
       {/if}
   </div>
\ No newline at end of file
diff --git a/ng-app/src/apps/PostMdViewer.svelte b/ng-app/src/apps/PostMdViewer.svelte
index 1342c12..1a4f779 100644
--- a/ng-app/src/apps/PostMdViewer.svelte
+++ b/ng-app/src/apps/PostMdViewer.svelte
@@ -53,6 +53,7 @@
 
     let editor;
     let has_content = true;
+    let loading = true;
 
     async function setup() {
         try {
@@ -120,9 +121,9 @@
                 Y.applyUpdate(ydoc, h.YXml, {local:true})
                 has_content = true;
             }
+            loading = false;
         }
         catch (e){
-            console.log("in setup ")
             console.log(e)
         }
     }
@@ -149,6 +150,7 @@
   </script>
 
     {#if !has_content}
+      <div class="flex-row">
         <button
             on:click={edit}
             on:keypress={edit}
@@ -157,8 +159,36 @@
             <PencilSquare tabindex="-1" class="mr-2 focus:outline-none" />
             {$t("doc.start_editing")}            
         </button>
+      </div>
     {/if}
 
+  {#if loading}
+    <div class="grow flex flex-col justify-center text-primary-700">
+        <svg
+            class="animate-spin mt-4 h-10 w-10 mb-4 mx-auto"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+        >
+            <circle
+            class="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="4"
+            />
+            <path
+            class="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            />
+        </svg>
+        <p class="text-center">{$t("connectivity.loading")}...</p>
+    </div>
+  {/if}
+
   <div class="grow p-5 post-rich-text prose">
     <div id="mdeditor" class="prosemirror-editor"></div>
   </div>
diff --git a/ng-app/src/apps/ProseMirrorViewer.svelte b/ng-app/src/apps/ProseMirrorViewer.svelte
index 29bb6af..1ade29c 100644
--- a/ng-app/src/apps/ProseMirrorViewer.svelte
+++ b/ng-app/src/apps/ProseMirrorViewer.svelte
@@ -33,6 +33,8 @@
     const ydoc = new Y.Doc()
     const yxml = ydoc.getXmlFragment('ng')
 
+    let loading = true;
+
     ydoc.on('destroy', async () => {
         commits.discrete?.deregisterOnUpdate();
     })
@@ -55,7 +57,8 @@
         for (const h of history) {
             Y.applyUpdate(ydoc, h.YXml, {local:true})
         }
-        source = toHTML()
+        source = toHTML();
+        loading = false;
     });
 
     onDestroy(()=>{
@@ -69,6 +72,33 @@
   </script>
   <div class="grow p-5">
     
+    {#if loading}
+        <div class="grow flex flex-col justify-center text-primary-700">
+            <svg
+                class="animate-spin mt-4 h-10 w-10 mb-4 mx-auto"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+            >
+                <circle
+                class="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                stroke-width="4"
+                />
+                <path
+                class="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                />
+            </svg>
+            <p class="text-center">{$t("connectivity.loading")}...</p>
+        </div>
+    {/if}
+
     {#if source}
       
         <div class="post-rich-text prose">
diff --git a/ng-app/src/apps/TextViewer.svelte b/ng-app/src/apps/TextViewer.svelte
index 4f1dacb..fac3d41 100644
--- a/ng-app/src/apps/TextViewer.svelte
+++ b/ng-app/src/apps/TextViewer.svelte
@@ -45,7 +45,8 @@
     let source = "";
 
     const ydoc = new Y.Doc()
-    const ytext = ydoc.getText('ng')
+    const ytext = ydoc.getText('ng');
+    let loading = true;
 
     ydoc.on('destroy', async () => {
         commits.discrete?.deregisterOnUpdate();
@@ -60,6 +61,7 @@
             Y.applyUpdate(ydoc, h.YText, {local:true})
         }
         source = ytext.toString()
+        loading = false;
     });
 
     onDestroy(()=>{
@@ -72,6 +74,32 @@
   
   </script>
   <div class="flex-col">
+    {#if loading}
+        <div class="grow flex flex-col justify-center text-primary-700">
+            <svg
+                class="animate-spin mt-4 h-10 w-10 mb-4 mx-auto"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+            >
+                <circle
+                class="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                stroke-width="4"
+                />
+                <path
+                class="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                />
+            </svg>
+            <p class="text-center">{$t("connectivity.loading")}...</p>
+        </div>
+    {/if}
     {#if source}
       {#if $cur_tab_branch_class === "code:svelte"}
         <HighlightSvelte code={source} class="mb-10" let:highlighted>
diff --git a/ng-app/src/apps/YMapViewer.svelte b/ng-app/src/apps/YMapViewer.svelte
index b55634b..7e5ba49 100644
--- a/ng-app/src/apps/YMapViewer.svelte
+++ b/ng-app/src/apps/YMapViewer.svelte
@@ -37,6 +37,7 @@
     const ymap = ydoc.get('ng', crdt == "YMap" ? Y.Map : Y.Array)
 
     let editor;
+    let loading = true;
 
     let content = {
         text: undefined,
@@ -102,6 +103,7 @@
             });
             editor.patch(operations);
             content.json = ymap.toJSON();
+            loading = false;
         }
     });
 
@@ -117,7 +119,6 @@
         for (const h of history) {
             Y.applyUpdate(ydoc, h[crdt], {local:true})
         }
-
     });
 
     onDestroy(async ()=>{
@@ -126,6 +127,34 @@
     });
   
   </script>
+
+    {#if loading}
+        <div class="grow mb-4 flex flex-col justify-center text-primary-700">
+            <svg
+                class="animate-spin mt-4 h-10 w-10 mb-4 mx-auto"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+            >
+                <circle
+                class="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                stroke-width="4"
+                />
+                <path
+                class="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                />
+            </svg>
+            <p class="text-center">{$t("connectivity.loading")}...</p>
+        </div>
+    {/if}
+
   <div class="grow ng-json-editor" style="min-height:300px;">
     <JSONEditor bind:this={editor} {content} readOnly={true} />
     
diff --git a/ng-app/src/lib/Document.svelte b/ng-app/src/lib/Document.svelte
index 194843e..902142f 100644
--- a/ng-app/src/lib/Document.svelte
+++ b/ng-app/src/lib/Document.svelte
@@ -90,19 +90,95 @@
             {/if}
             {#if commits}
                 {#await commits.load()}
-                    <div class:max-w-screen-lg={center} class="row p-4 text-gray-600" class:w-[1024px]={center}> 
-                        <p>{$t("connectivity.loading")}...</p>
+                  <div class="flex flex-col justify-center text-primary-700">
+                    <div class:max-w-screen-lg={center} class="p-4" class:w-[1024px]={center}> 
+                      <svg
+                        class="animate-spin mt-4 h-10 w-10 mb-4 mx-auto"
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <circle
+                          class="opacity-25"
+                          cx="12"
+                          cy="12"
+                          r="10"
+                          stroke="currentColor"
+                          stroke-width="4"
+                        />
+                        <path
+                          class="opacity-75"
+                          fill="currentColor"
+                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                        />
+                      </svg>
+                      <p class="text-center">{$t("connectivity.loading")}...</p>
                     </div>
+                  </div>
                 {:then}
-                
                     {#if $cur_app}
                         {#await load_official_app($cur_app) then app}
-                        <div class:max-w-screen-lg={center} class="flex" style="overflow-wrap: anywhere;" class:w-[1024px]={center} > 
+                        <div class:max-w-screen-lg={center} class="flex flex-col" style="overflow-wrap: anywhere;" class:w-[1024px]={center} > 
                             <svelte:component this={app} commits={$commits}/>
                         </div>
                         {/await}
+                    {:else}
+                      <div class="flex flex-col justify-center text-primary-700">
+                        <div class:max-w-screen-lg={center} class="p-4" class:w-[1024px]={center}> 
+                          <svg
+                            class="animate-spin mt-4 h-10 w-10 mb-4 mx-auto"
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                          >
+                            <circle
+                              class="opacity-25"
+                              cx="12"
+                              cy="12"
+                              r="10"
+                              stroke="currentColor"
+                              stroke-width="4"
+                            />
+                            <path
+                              class="opacity-75"
+                              fill="currentColor"
+                              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                            />
+                          </svg>
+                          <p class="text-center">{$t("connectivity.loading")}...</p>
+                        </div>
+                      </div>
                     {/if}
                 {/await}
+            {:else}
+              <div class="flex flex-col justify-center text-primary-700">
+                <div class:max-w-screen-lg={center} class="p-4" class:w-[1024px]={center}> 
+                  <svg
+                    class="animate-spin mt-4 h-10 w-10 mb-4 mx-auto"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <circle
+                      class="opacity-25"
+                      cx="12"
+                      cy="12"
+                      r="10"
+                      stroke="currentColor"
+                      stroke-width="4"
+                    />
+                    <path
+                      class="opacity-75"
+                      fill="currentColor"
+                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                    />
+                  </svg>
+                  <p class="text-center">{$t("connectivity.loading")}...</p>
+                </div>
+              </div>
             {/if}
 
         </div>
diff --git a/ng-app/src/routes/WalletCreate.svelte b/ng-app/src/routes/WalletCreate.svelte
index 46b8a8c..2953f3d 100644
--- a/ng-app/src/routes/WalletCreate.svelte
+++ b/ng-app/src/routes/WalletCreate.svelte
@@ -903,7 +903,7 @@
                   </svg>
                   <span> {@html $t("pages.wallet_create.broker_about.5")}</span>
                 </li>
-                <li class="flex space-x-3">
+                <!-- <li class="flex space-x-3">
                   <svg
                     class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
                     fill="none"
@@ -921,7 +921,7 @@
                   </svg>
 
                   <span> {@html $t("pages.wallet_create.broker_about.6")}</span>
-                </li>
+                </li> -->
                 <li class="flex space-x-3">
                   <svg
                     class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
diff --git a/ngaccount/web/src/routes/Create.svelte b/ngaccount/web/src/routes/Create.svelte
index f87a09a..90d8cef 100644
--- a/ngaccount/web/src/routes/Create.svelte
+++ b/ngaccount/web/src/routes/Create.svelte
@@ -316,7 +316,7 @@
                 <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z"></path>
               </svg>
               <span>
-                Q: I heard that with NextGraph there will be no more ToS to accept. Why then are there some ToS here? <br/> A: You are right that with NextGraph we can do without ToS, when the user is connecting to a self-hosted broker or to an NGbox. As those 2 options are not available yet, we only offer our public Broker Service Provider for now, which needs some ToS to be accepted. Very soon those 2 additional options will be available, but some users might still prefer using our brokers. In any case, the ToS here are minimal and with end-to-end encryption, your data is unreadable to us anyway.</span
+                Q: I heard that with NextGraph there will be no more ToS to accept. Why then are there some ToS here? <br/> A: You are right that with NextGraph we can do without ToS, when the user is connecting to a self-hosted broker. As those 2 options are not available yet, we only offer our public Broker Service Provider for now, which needs some ToS to be accepted. Very soon those 2 additional options will be available, but some users might still prefer using our brokers. In any case, the ToS here are minimal and with end-to-end encryption, your data is unreadable to us anyway.</span
               >
             </li>
             <li class="flex space-x-3">