feat(standalone/setup): intermediate screen for creating new document

apps/client/src/setup.tsx

@@ -19,14 +19,15 @@ async function main() {
     document.body.replaceChildren(bodyWrapper);
 }
 
-type State = "firstOptions" | "syncFromDesktop" | "syncFromServer" | "syncInProgress" | "syncFailed";
+type State = "firstOptions" | "createNewDocument" | "syncFromDesktop" | "syncFromServer" | "syncInProgress" | "syncFailed";
 
 function App() {
-    const [ state, setState ] = useState<State>("syncFromServer");
+    const [ state, setState ] = useState<State>("firstOptions");
 
     return (
         <div class="setup-container">
             {state === "firstOptions" && <SetupOptions setState={setState} />}
+            {state === "createNewDocument" && <CreateNewDocument />}
             {state === "syncFromServer" && <SyncFromServer setState={setState} />}
             {state === "syncInProgress" && <SyncInProgress />}
         </div>
@@ -43,12 +44,7 @@ function SetupOptions({ setState }: { setState: (state: State) => void }) {
                     icon="bx bx-file-blank"
                     title={t("setup.new-document")}
                     description={t("setup.new-document-description")}
-                    onClick={async () => {
-                        await server.post("setup/new-document");
-
-                        // After creating a new document, we can just reload the page to load it.
-                        location.reload();
-                    }}
+                    onClick={() => setState("createNewDocument")}
                 />
 
                 <SetupOptionCard
@@ -159,6 +155,21 @@ function Spinner() {
         </div>);
 }
 
+function CreateNewDocument() {
+    useEffect(() => {
+        server.post("setup/new-document").then(() => {
+            location.reload();
+        });
+    }, []);
+
+    return (<div class="page create-new-document">
+        <h1>{t("setup.create-new-document-title")}</h1>
+        <p>{t("setup.create-new-document-description")}</p>
+
+        <Spinner />
+    </div>);
+}
+
 function SyncFromServer({ setState }: { setState: (state: State) => void }) {
     const [serverUrl, setServerUrl] = useState("");
     const [password, setPassword] = useState("");

apps/client/src/translations/en/translation.json

@@ -2252,6 +2252,8 @@
     "button-finish-setup": "Finish setup",
     "sync-step-connecting": "Connecting to server",
     "sync-step-syncing": "Syncing data",
-    "sync-step-finalizing": "Setting up options"
+    "sync-step-finalizing": "Setting up options",
+    "create-new-document-title": "Preparing your new document",
+    "create-new-document-description": "You’ll be redirected automatically in a moment."
   }
 }