Add spinner on map load.

packages/editor/package.json

@@ -45,7 +45,8 @@
   "dependencies": {
     "@wisemapping/mindplot": "^5.0.15",
     "emoji-picker-react": "^4.4.4",
-    "react-color": "^2.19.3"
+    "react-color": "^2.19.3",
+    "react-loader-spinner": "^5.3.4"
   },
   "peerDependencies": {
     "@emotion/react": "^11.10.5",

packages/editor/src/components/index.tsx

@@ -18,6 +18,7 @@
 import React, { ReactElement, useCallback, useEffect, useState } from 'react';
 import Popover from '@mui/material/Popover';
 import Model from '../classes/model/editor';
+import { Vortex } from 'react-loader-spinner';
 
 import { IntlProvider } from 'react-intl';
 import {
@@ -42,6 +43,7 @@ import { ToolbarActionType } from './toolbar/ToolbarActionType';
 import MapInfo from '../classes/model/map-info';
 import EditorToolbar from './editor-toolbar';
 import ZoomPanel from './zoom-panel';
+import { SpinnerCentered } from './style';
 
 export type EditorOptions = {
   mode: EditorRenderMode;
@@ -134,6 +136,18 @@ const Editor = ({
           capability={capability}
           message={mapInfo.isLocked() ? mapInfo.getLockedMessage() : ''}
         />
+
+        {!model && (
+          <SpinnerCentered>
+            <Vortex
+              visible={true}
+              height="160"
+              width="160"
+              ariaLabel="vortex-loading"
+              colors={['#ffde1a', '#ffce00', '#ffa700', '#ff8d00', '#ff7400', '#ffde1a']}
+            />
+          </SpinnerCentered>
+        )}
       </IntlProvider>
     </ThemeProvider>
   );

packages/editor/src/components/style.ts

@@ -0,0 +1,28 @@
+/*
+ *    Copyright [2021] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+import styled from 'styled-components';
+
+export const SpinnerCentered = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -50px;
+  margin-left: -50px;
+  width: 100px;
+  height: 100px;
+`;