NextGraph
/
nextgraph-rs
1
3
Fork 0
Code Issues 1 Pull Requests Packages Projects 2 Releases 3 Activity

spinners for data loading

Browse Source
master
Niko PLP 4 months ago
parent a127efffa6
commit 6f3e7b16eb
9 changed files with 252 additions and 28 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 47
      ng-app/src/apps/AutomergeEditor.svelte
  2. 18
      ng-app/src/apps/ContainerView.svelte
  3. 32
      ng-app/src/apps/PostMdViewer.svelte
  4. 32
      ng-app/src/apps/ProseMirrorViewer.svelte
  5. 30
      ng-app/src/apps/TextViewer.svelte
  6. 31
      ng-app/src/apps/YMapViewer.svelte
  7. 84
      ng-app/src/lib/Document.svelte
  8. 4
      ng-app/src/routes/WalletCreate.svelte
  9. 2
      ngaccount/web/src/routes/Create.svelte

47
ng-app/src/apps/AutomergeEditor.svelte
Unescape View File

@ -38,6 +38,7 @@
export let readonly = false; export let readonly = false;
let doc = {}; let doc = {};
let loading = true;
let safari_error = false; let safari_error = false;
@ -87,6 +88,8 @@
root_proxy = d; root_proxy = d;
}); });
loading = false;
}); });
async function update(event) { async function update(event) {
@ -126,19 +129,47 @@
{#if safari_error} {#if safari_error}
<Alert class="m-2" color="red">{$t("errors.no_wasm_on_old_safari")}</Alert> <Alert class="m-2" color="red">{$t("errors.no_wasm_on_old_safari")}</Alert>
{:else} {: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} {#if Object.keys(doc).length !== 0 || !readonly}
<div class="grow mb-20" style="min-height:300px;"> <div class="grow mb-20" style="min-height:300px;">
<AMap {readonly} value={doc} {doc} on:update={update} on:updateText={updateText} proxy={root_proxy}/> <AMap {readonly} value={doc} {doc} on:update={update} on:updateText={updateText} proxy={root_proxy}/>
</div> </div>
{:else if $cur_tab_doc_can_edit} {:else if $cur_tab_doc_can_edit}
<button <div class="flex-row">
on:click={edit} <button
on:keypress={edit} on:click={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" 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")} <PencilSquare class="mr-2 focus:outline-none" tabindex="-1" />
</button> {$t("doc.start_editing")}
</button>
</div>
{:else} {:else}
<p class="ml-5">{$t("doc.empty")}</p> <p class="ml-5">{$t("doc.empty")}</p>
{/if} {/if}

18
ng-app/src/apps/ContainerView.svelte
Unescape View File

@ -50,14 +50,14 @@
{#if commits.graph.length == 0 || contained(commits.graph).length == 0} {#if commits.graph.length == 0 || contained(commits.graph).length == 0}
<p>{$t("doc.empty_container")}</p> <p>{$t("doc.empty_container")}</p>
{#if $cur_tab_doc_can_edit} {#if $cur_tab_doc_can_edit}
<button <button
on:click={create} on:click={create}
on:keypress={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" 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" /> <PencilSquare tabindex="-1" class="mr-2 focus:outline-none" />
{$t("doc.create")} {$t("doc.create")}
</button> </button>
{/if} {/if}
{/if} {/if}
</div> </div>

32
ng-app/src/apps/PostMdViewer.svelte
Unescape View File

@ -53,6 +53,7 @@
let editor; let editor;
let has_content = true; let has_content = true;
let loading = true;
async function setup() { async function setup() {
try { try {
@ -120,9 +121,9 @@
Y.applyUpdate(ydoc, h.YXml, {local:true}) Y.applyUpdate(ydoc, h.YXml, {local:true})
has_content = true; has_content = true;
} }
loading = false;
} }
catch (e){ catch (e){
console.log("in setup ")
console.log(e) console.log(e)
} }
} }
@ -149,6 +150,7 @@
</script> </script>
{#if !has_content} {#if !has_content}
<div class="flex-row">
<button <button
on:click={edit} on:click={edit}
on:keypress={edit} on:keypress={edit}
@ -157,8 +159,36 @@
<PencilSquare tabindex="-1" class="mr-2 focus:outline-none" /> <PencilSquare tabindex="-1" class="mr-2 focus:outline-none" />
{$t("doc.start_editing")} {$t("doc.start_editing")}
</button> </button>
</div>
{/if} {/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 class="grow p-5 post-rich-text prose">
<div id="mdeditor" class="prosemirror-editor"></div> <div id="mdeditor" class="prosemirror-editor"></div>
</div> </div>

32
ng-app/src/apps/ProseMirrorViewer.svelte
Unescape View File

@ -33,6 +33,8 @@
const ydoc = new Y.Doc() const ydoc = new Y.Doc()
const yxml = ydoc.getXmlFragment('ng') const yxml = ydoc.getXmlFragment('ng')
let loading = true;
ydoc.on('destroy', async () => { ydoc.on('destroy', async () => {
commits.discrete?.deregisterOnUpdate(); commits.discrete?.deregisterOnUpdate();
}) })
@ -55,7 +57,8 @@
for (const h of history) { for (const h of history) {
Y.applyUpdate(ydoc, h.YXml, {local:true}) Y.applyUpdate(ydoc, h.YXml, {local:true})
} }
source = toHTML() source = toHTML();
loading = false;
}); });
onDestroy(()=>{ onDestroy(()=>{
@ -69,6 +72,33 @@
</script> </script>
<div class="grow p-5"> <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} {#if source}
<div class="post-rich-text prose"> <div class="post-rich-text prose">

30
ng-app/src/apps/TextViewer.svelte
Unescape View File

@ -45,7 +45,8 @@
let source = ""; let source = "";
const ydoc = new Y.Doc() const ydoc = new Y.Doc()
const ytext = ydoc.getText('ng') const ytext = ydoc.getText('ng');
let loading = true;
ydoc.on('destroy', async () => { ydoc.on('destroy', async () => {
commits.discrete?.deregisterOnUpdate(); commits.discrete?.deregisterOnUpdate();
@ -60,6 +61,7 @@
Y.applyUpdate(ydoc, h.YText, {local:true}) Y.applyUpdate(ydoc, h.YText, {local:true})
} }
source = ytext.toString() source = ytext.toString()
loading = false;
}); });
onDestroy(()=>{ onDestroy(()=>{
@ -72,6 +74,32 @@
</script> </script>
<div class="flex-col"> <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 source}
{#if $cur_tab_branch_class === "code:svelte"} {#if $cur_tab_branch_class === "code:svelte"}
<HighlightSvelte code={source} class="mb-10" let:highlighted> <HighlightSvelte code={source} class="mb-10" let:highlighted>

31
ng-app/src/apps/YMapViewer.svelte
Unescape View File

@ -37,6 +37,7 @@
const ymap = ydoc.get('ng', crdt == "YMap" ? Y.Map : Y.Array) const ymap = ydoc.get('ng', crdt == "YMap" ? Y.Map : Y.Array)
let editor; let editor;
let loading = true;
let content = { let content = {
text: undefined, text: undefined,
@ -102,6 +103,7 @@
}); });
editor.patch(operations); editor.patch(operations);
content.json = ymap.toJSON(); content.json = ymap.toJSON();
loading = false;
} }
}); });
@ -117,7 +119,6 @@
for (const h of history) { for (const h of history) {
Y.applyUpdate(ydoc, h[crdt], {local:true}) Y.applyUpdate(ydoc, h[crdt], {local:true})
} }
}); });
onDestroy(async ()=>{ onDestroy(async ()=>{
@ -126,6 +127,34 @@
}); });
</script> </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;"> <div class="grow ng-json-editor" style="min-height:300px;">
<JSONEditor bind:this={editor} {content} readOnly={true} /> <JSONEditor bind:this={editor} {content} readOnly={true} />

84
ng-app/src/lib/Document.svelte
Unescape View File

@ -90,19 +90,95 @@
{/if} {/if}
{#if commits} {#if commits}
{#await commits.load()} {#await commits.load()}
<div class:max-w-screen-lg={center} class="row p-4 text-gray-600" class:w-[1024px]={center}> <div class="flex flex-col justify-center text-primary-700">
<p>{$t("connectivity.loading")}...</p> <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>
</div>
{:then} {:then}
{#if $cur_app} {#if $cur_app}
{#await load_official_app($cur_app) then 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}/> <svelte:component this={app} commits={$commits}/>
</div> </div>
{/await} {/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} {/if}
{/await} {/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} {/if}
</div> </div>

4
ng-app/src/routes/WalletCreate.svelte
Unescape View File

@ -903,7 +903,7 @@
</svg> </svg>
<span> {@html $t("pages.wallet_create.broker_about.5")}</span> <span> {@html $t("pages.wallet_create.broker_about.5")}</span>
</li> </li>
<li class="flex space-x-3"> <!-- <li class="flex space-x-3">
<svg <svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
fill="none" fill="none"
@ -921,7 +921,7 @@
</svg> </svg>
<span> {@html $t("pages.wallet_create.broker_about.6")}</span> <span> {@html $t("pages.wallet_create.broker_about.6")}</span>
</li> </li> -->
<li class="flex space-x-3"> <li class="flex space-x-3">
<svg <svg
class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"

2
ngaccount/web/src/routes/Create.svelte
Unescape View File

@ -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> <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> </svg>
<span> <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>
<li class="flex space-x-3"> <li class="flex space-x-3">

Write Preview
Loading…
Cancel
Save