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">