From 5c7c3c64875146a1e9e931808a95a361a5b4d086 Mon Sep 17 00:00:00 2001
From: Aditya Mitra <55396651+aditya-mitra@users.noreply.github.com>
Date: Tue, 11 Jun 2024 16:20:47 +0530
Subject: [PATCH] show loading when adding scene (#10345)

---
 .../editor/panels/Scenes/container/index.tsx     | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/editor/panels/Scenes/container/index.tsx b/packages/ui/src/components/editor/panels/Scenes/container/index.tsx
index c1a12d25cd..3f5986b28b 100644
--- a/packages/ui/src/components/editor/panels/Scenes/container/index.tsx
+++ b/packages/ui/src/components/editor/panels/Scenes/container/index.tsx
@@ -50,12 +50,16 @@ export default function ScenesPanel() {
   const contextMenuRef = useRef(null)
   const isContextMenuOpen = useHookstate<AssetType['id']>('')
   const scenesLoading = scenesQuery.status === 'pending'
-  const onCreateScene = async () => onNewScene()
 
-  const onClickScene = (scene: AssetType) => {
-    getMutableState(EditorState).scenePath.set(scene.assetURL)
+  const isCreatingScene = useHookstate(false)
+  const handleCreateScene = async () => {
+    isCreatingScene.set(true)
+    await onNewScene()
+    isCreatingScene.set(false)
   }
 
+  const onClickScene = (scene: AssetType) => getMutableState(EditorState).scenePath.set(scene.assetURL)
+
   const deleteSelectedScene = async (scene: AssetType) => {
     if (scene) {
       await deleteScene(scene.id)
@@ -77,11 +81,13 @@ export default function ScenesPanel() {
       <div className="mb-4 w-full bg-theme-surface-main">
         <Button
           startIcon={<HiOutlinePlusCircle />}
+          endIcon={isCreatingScene.value && <LoadingView spinnerOnly className="h-4 w-4" />}
+          disabled={isCreatingScene.value}
           variant="transparent"
           rounded="none"
-          className="ml-auto w-32 bg-theme-highlight px-2"
+          className="ml-auto bg-theme-highlight px-2"
           size="small"
-          onClick={onCreateScene}
+          onClick={handleCreateScene}
         >
           {t('editor:newScene')}
         </Button>