Add spinner on map load.

This commit is contained in:
Paulo Gustavo Veiga 2022-11-16 19:27:11 -08:00
parent 0cac062249
commit a1f0fa6281
4 changed files with 59 additions and 2 deletions

View File

@ -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",

View File

@ -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>
);

View File

@ -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;
`;

View File

@ -11552,6 +11552,15 @@ react-is@^18.0.0, react-is@^18.2.0:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
react-loader-spinner@^5.3.4:
version "5.3.4"
resolved "https://registry.yarnpkg.com/react-loader-spinner/-/react-loader-spinner-5.3.4.tgz#43c22a41944e2bf3c84a249192450f1166592f30"
integrity sha512-G2vw4ssX+RDZ/vfaeva06yfNqyFViv/u+tVZ3kFLy5TKNlNx2DbuwreBSpRtPespQA+VxinxUJsigwLwG9erOg==
dependencies:
react-is "^18.2.0"
styled-components "^5.3.5"
styled-tools "^1.7.2"
react-query@^3.39.1:
version "3.39.2"
resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.39.2.tgz#9224140f0296f01e9664b78ed6e4f69a0cc9216f"
@ -12940,7 +12949,7 @@ style-loader@^3.3.1:
resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.1.tgz#057dfa6b3d4d7c7064462830f9113ed417d38575"
integrity sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==
styled-components@^5.3.6:
styled-components@^5.3.5, styled-components@^5.3.6:
version "5.3.6"
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.6.tgz#27753c8c27c650bee9358e343fc927966bfd00d1"
integrity sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg==
@ -12956,6 +12965,11 @@ styled-components@^5.3.6:
shallowequal "^1.1.0"
supports-color "^5.5.0"
styled-tools@^1.7.2:
version "1.7.2"
resolved "https://registry.yarnpkg.com/styled-tools/-/styled-tools-1.7.2.tgz#a8f71198535cf785d7db0927cc1c1b88337c4440"
integrity sha512-IjLxzM20RMwAsx8M1QoRlCG/Kmq8lKzCGyospjtSXt/BTIIcvgTonaxQAsKnBrsZNwhpHzO9ADx5te0h76ILVg==
stylis@4.1.3:
version "4.1.3"
resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.3.tgz#fd2fbe79f5fed17c55269e16ed8da14c84d069f7"