mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-12-22 19:53:49 +01:00
Add spinner on map load.
This commit is contained in:
parent
0cac062249
commit
a1f0fa6281
@ -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",
|
||||
|
@ -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>
|
||||
);
|
||||
|
28
packages/editor/src/components/style.ts
Normal file
28
packages/editor/src/components/style.ts
Normal 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;
|
||||
`;
|
16
yarn.lock
16
yarn.lock
@ -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"
|
||||
|
Loading…
Reference in New Issue
Block a user