n/nyxmuks
1
0
Fork 0
forked from Mirrors/gomuks
Code Pull requests Activity

web/settings: add loading view for vs code

Browse source
This commit is contained in:
Tulir Asokan 2024-12-06 14:25:19 +02:00
parent 92c5e86689
commit b1c02a3b69
2 changed files with 19 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
web/src/ui/settings/SettingsView.css
View file

@ -60,6 +60,15 @@ div.settings-view {
position: fixed; position: fixed;
inset: 0; inset: 0;
z-index: 10; z-index: 10;
background-color: var(--background-color);
> div.loader {
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
}
} }
> div.buttons { > div.buttons {

17
web/src/ui/settings/SettingsView.tsx
View file

@ -13,7 +13,8 @@
// //
// You should have received a copy of the GNU Affero General Public License // 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/>. // 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 Client from "@/api/client.ts"
import { RoomStateStore, usePreferences } from "@/api/statestore" import { RoomStateStore, usePreferences } from "@/api/statestore"
import { import {
@ -242,12 +243,14 @@ const CustomCSSInput = ({ setPref, room }: { setPref: SetPrefFunc, room: RoomSta
</span>} </span>}
</div> </div>
{vscodeOpen ? <div className="vscode-wrapper"> {vscodeOpen ? <div className="vscode-wrapper">
<Monaco <Suspense fallback={<div className="loader"><ScaleLoader width={40} height={80} color="var(--primary-color)"/></div>}>
initData={vscodeInitialContentRef.current} <Monaco
onClose={closeVSCode} initData={vscodeInitialContentRef.current}
onSave={onSave} onClose={closeVSCode}
contentRef={vscodeContentRef} onSave={onSave}
/> contentRef={vscodeContentRef}
/>
</Suspense>
</div> : <textarea value={text} onChange={onChangeText}/>} </div> : <textarea value={text} onChange={onChangeText}/>}
<div className="buttons"> <div className="buttons">
<button onClick={onClickVSCode}>Open in VS Code</button> <button onClick={onClickVSCode}>Open in VS Code</button>