diff --git a/apps/mobile/app/components/dialog-provider/index.js b/apps/mobile/app/components/dialog-provider/index.js
index 37c90f7d2..f4dec7e26 100644
--- a/apps/mobile/app/components/dialog-provider/index.js
+++ b/apps/mobile/app/components/dialog-provider/index.js
@@ -26,6 +26,7 @@ import AuthModal from "../auth/auth-modal";
import { SessionExpired } from "../auth/session-expired";
import { Dialog } from "../dialog";
import { AddTopicDialog } from "../dialogs/add-topic";
+import { LoadingDialog } from "../dialogs/loading";
import ResultDialog from "../dialogs/result";
import { VaultDialog } from "../dialogs/vault";
import ImagePreview from "../image-preview";
@@ -47,6 +48,7 @@ const DialogProvider = () => {
return (
<>
+
diff --git a/apps/mobile/app/components/dialogs/loading/index.tsx b/apps/mobile/app/components/dialogs/loading/index.tsx
new file mode 100644
index 000000000..bb11785ca
--- /dev/null
+++ b/apps/mobile/app/components/dialogs/loading/index.tsx
@@ -0,0 +1,88 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2022 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program. If not, see .
+*/
+import React from "react";
+import { View } from "react-native";
+import { useThemeStore } from "../../../stores/use-theme-store";
+import BaseDialog from "../../dialog/base-dialog";
+import { ProgressBarComponent } from "../../ui/svg/lazy";
+import { useEffect } from "react";
+import {
+ eSubscribeEvent,
+ eUnSubscribeEvent
+} from "../../../services/event-manager";
+import { useState } from "react";
+import { eCloseLoading, eOpenLoading } from "../../../utils/events";
+
+export const LoadingDialog = () => {
+ const colors = useThemeStore((state) => state.colors);
+ const [visible, setVisible] = useState(false);
+
+ useEffect(() => {
+ eSubscribeEvent(eOpenLoading, open);
+ eSubscribeEvent(eCloseLoading, close);
+ return () => {
+ eUnSubscribeEvent(eOpenLoading, open);
+ eUnSubscribeEvent(eCloseLoading, close);
+ };
+ }, []);
+
+ const open = () => setVisible(true);
+ const close = () => setVisible(false);
+ return (
+
+
+
+
+
+
+
+ );
+};
diff --git a/apps/mobile/app/components/intro/welcome.js b/apps/mobile/app/components/intro/welcome.js
index c12ce37a2..4760491d4 100644
--- a/apps/mobile/app/components/intro/welcome.js
+++ b/apps/mobile/app/components/intro/welcome.js
@@ -26,13 +26,15 @@ import Navigation from "../../services/navigation";
import SettingsService from "../../services/settings";
import { useThemeStore } from "../../stores/use-theme-store";
import { getElevation } from "../../utils";
-import { eOpenLoginDialog } from "../../utils/events";
+import { eCloseLoading, eOpenLoginDialog } from "../../utils/events";
import { SIZE } from "../../utils/size";
import { AuthMode } from "../auth";
import { Button } from "../ui/button";
import { SvgView } from "../ui/svg";
import Heading from "../ui/typography/heading";
import Paragraph from "../ui/typography/paragraph";
+import { eOpenLoading } from "../../utils/events";
+import { sleep } from "../../utils/time";
const IMAGE = (color) =>
``;
@@ -97,7 +99,9 @@ export const WelcomeNotice = () => {