Add loading states + scene loading screen

packages/main/src/mainWindow.ts

@@ -14,6 +14,8 @@ async function createWindow() {
     },
   });
 
+  browserWindow.setMenuBarVisibility(false);
+
   /**
    * If the 'show' property of the BrowserWindow's constructor is omitted from the initialization options,
    * it then defaults to 'true'. This can cause flickering as the window loads the html content,

packages/main/tests/unit.spec.ts

@@ -21,6 +21,7 @@ vi.mock('electron', () => {
   bw.prototype.isMinimized = vi.fn();
   bw.prototype.focus = vi.fn();
   bw.prototype.restore = vi.fn();
+  bw.prototype.setMenuBarVisibility = vi.fn();
 
   const app: Pick<Electron.App, 'getAppPath'> = {
     getAppPath(): string {

packages/preload/src/index.ts

@@ -1,2 +1,3 @@
-export * as workspace from './modules/workspace';
 export * as editor from './modules/editor';
+export * as misc from './modules/misc';
+export * as workspace from './modules/workspace';

packages/preload/src/modules/misc.ts

@@ -0,0 +1,8 @@
+import { isUrl } from '/shared/types/utils';
+
+import { invoke } from './invoke';
+
+export async function openExternal(url: string) {
+  if (!isUrl(url)) throw new Error('Invalid URL provided');
+  await invoke('electron.openExternal', url);
+}

packages/renderer/src/components/Dropdown/component.tsx

@@ -12,16 +12,19 @@ function Dropdown(props: Props) {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
 
-  const handleClick = useCallback((event: MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
+  const handleClick = useCallback((e: MouseEvent<HTMLElement>) => {
+    e.stopPropagation();
+    setAnchorEl(e.currentTarget);
   }, []);
 
-  const handleSelect = useCallback((_: MouseEvent<HTMLLIElement>, option: Option) => {
+  const handleSelect = useCallback((e: MouseEvent<HTMLLIElement>, option: Option) => {
+    e.stopPropagation();
     setAnchorEl(null);
     option.handler();
   }, []);
 
-  const handleClose = useCallback(() => {
+  const handleClose = useCallback((e: MouseEvent<HTMLElement>) => {
+    e.stopPropagation();
     setAnchorEl(null);
   }, []);
 

packages/renderer/src/components/Editor/component.tsx

@@ -1,15 +1,18 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import Loader from '@mui/material/CircularProgress';
+import { CircularProgress as Loader } from 'decentraland-ui2';
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
 
 import { DEPLOY_URLS } from '/shared/types/deploy';
 import { t } from '/@/modules/store/translation/utils';
 import { useEditor } from '/@/hooks/useEditor';
 
+import EditorPng from '/assets/images/editor.png';
+
 import { PublishProject, type StepValue } from '../Modals/PublishProject';
 import { Button } from '../Button';
 import { Header } from '../Header';
+import { Row } from '../Row';
 
 import './styles.css';
 
@@ -108,52 +111,62 @@ export function Editor() {
   // iframe src
   const iframeUrl = `${htmlUrl}?${params}`;
 
+  const renderLoading = () => (
+    <div className="loading">
+      <img src={EditorPng} />
+      <Row>
+        <Loader />
+        {t('editor.loading.title')}
+      </Row>
+    </div>
+  );
+
   return (
     <div className="Editor">
-      <Header>
-        <>
-          <div
-            className="back"
-            onClick={handleBack}
-          >
-            <ArrowBackIosIcon />
-          </div>
-          <div className="title">{project?.title}</div>
-        </>
+      {!isReady ? (
+        renderLoading()
+      ) : (
         <>
-          <Button color="secondary">{t('editor.header.actions.code')}</Button>
-          <Button
-            color="secondary"
-            disabled={loadingPreview}
-            onClick={openPreview}
-          >
-            {t('editor.header.actions.preview')}
-          </Button>
-          <Button
-            color="primary"
-            onClick={handleOpenModal('publish')}
-          >
-            {t('editor.header.actions.publish')}
-          </Button>
+          <Header>
+            <>
+              <div
+                className="back"
+                onClick={handleBack}
+              >
+                <ArrowBackIosIcon />
+              </div>
+              <div className="title">{project?.title}</div>
+            </>
+            <>
+              <Button color="secondary">{t('editor.header.actions.code')}</Button>
+              <Button
+                color="secondary"
+                disabled={loadingPreview}
+                onClick={openPreview}
+              >
+                {t('editor.header.actions.preview')}
+              </Button>
+              <Button
+                color="primary"
+                onClick={handleOpenModal('publish')}
+              >
+                {t('editor.header.actions.publish')}
+              </Button>
+            </>
+          </Header>
+          <iframe
+            className="inspector"
+            src={iframeUrl}
+          ></iframe>
+          {project && (
+            <PublishProject
+              open={open === 'publish'}
+              project={project}
+              onClose={handleCloseModal}
+              onSubmit={handleSubmitModal}
+            />
+          )}
         </>
-      </Header>
-      {isReady ? (
-        <iframe
-          className="inspector"
-          src={iframeUrl}
-        ></iframe>
-      ) : (
-        <div className="loading">
-          <Loader />
-        </div>
-      )}
-      {project && (
-        <PublishProject
-          open={open === 'publish'}
-          project={project}
-          onClose={handleCloseModal}
-          onSubmit={handleSubmitModal}
-        />
       )}
     </div>
   );

packages/renderer/src/components/Editor/styles.css

@@ -39,7 +39,19 @@
 
 .Editor .loading {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
-  flex: 1 0 auto;
+  height: 100%;
+  font-size: 30px;
+}
+
+.Editor .loading img {
+  width: 240px;
+  transform: scaleX(-1);
+  margin-bottom: 20px;
+}
+
+.Editor .loading span {
+  margin-right: 15px;
 }

packages/renderer/src/components/Home/component.tsx

@@ -1,7 +1,10 @@
 import { useCallback } from 'react';
-import SettingsIcon from '@mui/icons-material/Settings';
+// import SettingsIcon from '@mui/icons-material/Settings';
 import { Container } from 'decentraland-ui2';
+
 import logo from '/assets/images/logo-editor.png';
+
+import { misc } from '#preload';
 import { t } from '/@/modules/store/translation/utils';
 
 import { Header } from '../Header';
@@ -16,22 +19,23 @@ import './styles.css';
 export function Home() {
   const { projects, sortBy, setSortBy } = useWorkspace();
 
-  const handleClickFeedback = useCallback(() => undefined, []);
+  const handleClickFeedback = useCallback(
+    () => misc.openExternal('https://decentraland.canny.io'),
+    [],
+  );
   const handleClickOptions = useCallback(() => undefined, []);
 
   return (
     <main className="Home">
       <Header>
         <>
-          {/* TODO: Get SVG for this logo 👇 and transform it into an Icon component */}
           <img
             src={logo}
             alt={t('home.header.title')}
           />
           <h4>{t('home.header.title')}</h4>
           <Button
             color="info"
-            href="https://decentraland.canny.io"
             onClick={handleClickFeedback}
           >
             {t('home.header.feedback')}
@@ -41,7 +45,7 @@ export function Home() {
           color="info"
           onClick={handleClickOptions}
         >
-          <SettingsIcon />
+          {/* <SettingsIcon /> */}
         </Button>
       </Header>
       <Container>

packages/renderer/src/components/ProjectCard/component.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useState } from 'react';
 import ViewModuleIcon from '@mui/icons-material/ViewModule';
 import cx from 'classnames';
-import { Link } from 'react-router-dom';
 
 import { getThumbnailUrl } from '/@/modules/project';
 import { t } from '/@/modules/store/translation/utils';
@@ -13,12 +12,17 @@ import type { Props } from './types';
 
 import './styles.css';
 
-export function ProjectCard({ project, onDelete, onDuplicate }: Props) {
+export function ProjectCard({ project, onClick, onDelete, onDuplicate }: Props) {
   const [open, setOpen] = useState(false);
   const parcels = project.layout.cols * project.layout.rows;
 
+  const handleClick = useCallback(() => {
+    if (onClick) onClick(project);
+  }, [project, onClick]);
+
   const handleDeleteProject = useCallback(() => {
     onDelete(project);
+    handleCloseModal();
   }, [project, onDelete]);
 
   const handleDuplicateProject = useCallback(() => {
@@ -47,36 +51,37 @@ export function ProjectCard({ project, onDelete, onDuplicate }: Props) {
   ];
 
   return (
-    <div className={cx('ProjectCard', { 'has-thumbnail': !!thumbnailUrl })}>
-      <Link
-        to={`/editor?path=${encodeURIComponent(project.path)}`}
-        className="project-thumbnail"
-        style={thumbnailUrl ? { backgroundImage: `url(${thumbnailUrl})` } : {}}
-      />
-      <div className="project-data">
-        <Link
-          to={`/editor?path=${encodeURIComponent(project.path)}`}
-          className="title-wrapper"
-        >
-          <div className="title">{project.title}</div>
-          <div
-            className="description"
-            title={project.description}
-          >
-            <ViewModuleIcon className="Icon" /> {t('scene_list.parcel_count', { parcels })}
-          </div>
-        </Link>
-        <Dropdown
-          className="options-dropdown"
-          options={dropdownOptions}
+    <>
+      <div
+        className={cx('ProjectCard', { 'has-thumbnail': !!thumbnailUrl })}
+        onClick={handleClick}
+      >
+        <div
+          className="project-thumbnail"
+          style={thumbnailUrl ? { backgroundImage: `url(${thumbnailUrl})` } : {}}
         />
+        <div className="project-data">
+          <div className="title-wrapper">
+            <div className="title">{project.title}</div>
+            <div
+              className="description"
+              title={project.description}
+            >
+              <ViewModuleIcon className="Icon" /> {t('scene_list.parcel_count', { parcels })}
+            </div>
+          </div>
+          <Dropdown
+            className="options-dropdown"
+            options={dropdownOptions}
+          />
+        </div>
       </div>
       <DeleteProject
         open={open}
         project={project}
         onClose={handleCloseModal}
         onSubmit={handleDeleteProject}
       />
-    </div>
+    </>
   );
 }

packages/renderer/src/components/ProjectCard/types.ts

@@ -2,6 +2,7 @@ import type { Project } from '/shared/types/projects';
 
 export type Props = {
   project: Project;
+  onClick: (project: Project) => void;
   onDelete: (project: Project) => void;
   onDuplicate: (project: Project) => void;
 };

packages/renderer/src/components/SceneList/component.tsx

@@ -29,7 +29,8 @@ function NoScenesAnchor(content: string) {
 }
 
 export function SceneList({ projects, sortBy, onSort }: Props) {
-  const { deleteProject, duplicateProject, importProject, createProject } = useWorkspace();
+  const { selectProject, deleteProject, duplicateProject, importProject, createProject } =
+    useWorkspace();
 
   const sort = useCallback(
     (_sortBy: SortBy) => {
@@ -65,6 +66,7 @@ export function SceneList({ projects, sortBy, onSort }: Props) {
         <ProjectCard
           key={project.path}
           project={project}
+          onClick={selectProject}
           onDelete={deleteProject}
           onDuplicate={duplicateProject}
         />

packages/renderer/src/components/Snackbar/Generic/index.tsx

@@ -1,7 +1,8 @@
-import { Alert } from 'decentraland-ui2';
+import { Alert, CircularProgress as Loader } from 'decentraland-ui2';
 
 import { type GenericNotification } from '/@/modules/store/snackbar/types';
 
 export function Generic({ severity, message }: GenericNotification) {
-  return <Alert severity={severity}>{message}</Alert>;
+  const props = severity === 'loading' ? { icon: <Loader size={20} /> } : { severity };
+  return <Alert {...props}>{message}</Alert>;
 }