From b1c02a3b69e891d099dd80b4f5d890b2f42874f7 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Fri, 6 Dec 2024 14:25:19 +0200
Subject: [PATCH] web/settings: add loading view for vs code

---
 web/src/ui/settings/SettingsView.css |  9 +++++++++
 web/src/ui/settings/SettingsView.tsx | 17 ++++++++++-------
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/web/src/ui/settings/SettingsView.css b/web/src/ui/settings/SettingsView.css
index cc0e7e7..1cda143 100644
--- a/web/src/ui/settings/SettingsView.css
+++ b/web/src/ui/settings/SettingsView.css
@@ -60,6 +60,15 @@ div.settings-view {
 			position: fixed;
 			inset: 0;
 			z-index: 10;
+			background-color: var(--background-color);
+
+			> div.loader {
+				position: absolute;
+				inset: 0;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
 		}
 
 		> div.buttons {
diff --git a/web/src/ui/settings/SettingsView.tsx b/web/src/ui/settings/SettingsView.tsx
index 657d1c9..131a542 100644
--- a/web/src/ui/settings/SettingsView.tsx
+++ b/web/src/ui/settings/SettingsView.tsx
@@ -13,7 +13,8 @@
 //
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
-import { lazy, use, useCallback, useRef, useState } from "react"
+import { Suspense, lazy, use, useCallback, useRef, useState } from "react"
+import { ScaleLoader } from "react-spinners"
 import Client from "@/api/client.ts"
 import { RoomStateStore, usePreferences } from "@/api/statestore"
 import {
@@ -242,12 +243,14 @@ const CustomCSSInput = ({ setPref, room }: { setPref: SetPrefFunc, room: RoomSta
 				</span>}
 		</div>
 		{vscodeOpen ? <div className="vscode-wrapper">
-			<Monaco
-				initData={vscodeInitialContentRef.current}
-				onClose={closeVSCode}
-				onSave={onSave}
-				contentRef={vscodeContentRef}
-			/>
+			<Suspense fallback={<div className="loader"><ScaleLoader width={40} height={80} color="var(--primary-color)"/></div>}>
+				<Monaco
+					initData={vscodeInitialContentRef.current}
+					onClose={closeVSCode}
+					onSave={onSave}
+					contentRef={vscodeContentRef}
+				/>
+			</Suspense>
 		</div> : <textarea value={text} onChange={onChangeText}/>}
 		<div className="buttons">
 			<button onClick={onClickVSCode}>Open in VS Code</button>