diff --git a/ng-app/src/lib/FullLayout.svelte b/ng-app/src/lib/FullLayout.svelte index b649f99..2affb04 100644 --- a/ng-app/src/lib/FullLayout.svelte +++ b/ng-app/src/lib/FullLayout.svelte @@ -28,6 +28,7 @@ import TxtIcon from "./icons/TxtIcon.svelte"; // @ts-ignore import Logo from "./components/Logo.svelte"; + import Spinner from "./components/Spinner.svelte"; import MenuItem from "./components/MenuItem.svelte"; import PaneHeader from "./components/PaneHeader.svelte"; import BranchIcon from "./icons/BranchIcon.svelte"; @@ -39,7 +40,7 @@ available_editors, available_viewers, set_editor, set_viewer, set_view_or_edit, toggle_live_edit, has_editor_chat, all_files_count, all_comments_count, hideMenu, show_modal_menu, show_modal_create, cur_tab_branch_nuri, cur_tab_doc_can_edit, cur_tab_doc_is_member, cur_tab_right_pane, cur_tab_folders_pane, - cur_tab_toc_pane, cur_tab_show_menu, cur_tab_branch_has_discrete, cur_tab_graph_or_discrete, cur_tab_view_or_edit } from "../tab"; + cur_tab_toc_pane, cur_tab_show_menu, cur_tab_branch_has_discrete, cur_tab_graph_or_discrete, cur_tab_view_or_edit, show_spinner } from "../tab"; import { active_session, redirect_after_login, toasts, check_has_camera, toast_error, reset_toasts, @@ -506,6 +507,12 @@ return ct; }); } + const openSpinner = () => { + $show_spinner = true; + } + const closeSpinner = () => { + $show_spinner = false; + } const share_items = [ {n:"repost",i:Bolt}, @@ -554,6 +561,7 @@ const new_document = async (class_name) => { closeModalCreate(); + openSpinner(); try { await reset_toasts(); let store_repo = $cur_tab.store.repo; @@ -561,9 +569,11 @@ store_repo = $all_tabs[$active_session.private_store_id].store.repo } let nuri = await ng.doc_create($active_session.session_id, get_class(class_name)["ng:crdt"], class_name, store_repo, destination); + closeSpinner(); push("#/"+nuri); } catch (e) { + closeSpinner(); toast_error(display_error(e)); } } @@ -894,7 +904,18 @@ {/if} </div> </Modal> - +<Modal class="spinner-overlay" + dismissable={false} + bind:open={$show_spinner} + size = 'xs' + placement = 'center' + backdropClass="bg-gray-900 bg-opacity-50 dark:bg-opacity-80" + > + <p>{$t("doc.creating")}...</p> + <div class="w-full flex justify-center"> + <Spinner className="w-10 h-10"/> + </div> +</Modal> <Modal class="menu-modal" outsideclose bind:open={$show_modal_create} diff --git a/ng-app/src/locales/en.json b/ng-app/src/locales/en.json index 7959fb6..beafd7a 100644 --- a/ng-app/src/locales/en.json +++ b/ng-app/src/locales/en.json @@ -49,6 +49,7 @@ "no_triples": "No triples in this Graph.", "start_editing": "Start editing", "create": "Create a Document", + "creating": "Please wait while your Document is being created", "not_found" : "Document not found", "empty_container": "Container is empty.", "not_found_details_online" : "The document could not be found locally on this device, nor on the broker.", diff --git a/ng-app/src/styles.css b/ng-app/src/styles.css index 234a724..2a9cd7c 100644 --- a/ng-app/src/styles.css +++ b/ng-app/src/styles.css @@ -225,6 +225,10 @@ div[role="alert"] div { display: block; } +.spinner-overlay button { + display: none; +} + .choice-button { min-width: 305px; } diff --git a/ng-app/src/tab.ts b/ng-app/src/tab.ts index cdc0c09..25a73c4 100644 --- a/ng-app/src/tab.ts +++ b/ng-app/src/tab.ts @@ -203,7 +203,7 @@ export const update_branch_display = (cur_tab) => { } export const show_modal_menu = writable(false); - +export const show_spinner = writable(false); export const show_modal_create = writable(false); export const in_memory_graph = writable("");