diff --git a/src/components/checkbox/checkbox-component.jsx b/src/components/checkbox/checkbox-component.jsx
index 23fdc2918..02a61070f 100644
--- a/src/components/checkbox/checkbox-component.jsx
+++ b/src/components/checkbox/checkbox-component.jsx
@@ -4,9 +4,19 @@ import PropTypes from 'prop-types';
import cx from 'classnames';
+import { HALF_EARTH_FUTURE_TILE_LAYER } from 'constants/layers-slugs';
+
import styles from './checkbox-styles.module.scss';
-function Checkbox({ option, onChange, checked, theme, className, disabled }) {
+function Checkbox({
+ option,
+ onChange,
+ checked,
+ theme,
+ className,
+ disabled,
+ showProgress,
+}) {
return (
)}
+ {option.value === HALF_EARTH_FUTURE_TILE_LAYER && showProgress && (
+
+ )}
);
}
diff --git a/src/components/checkbox/checkbox-styles.module.scss b/src/components/checkbox/checkbox-styles.module.scss
index c5712971b..6f65c2fa0 100644
--- a/src/components/checkbox/checkbox-styles.module.scss
+++ b/src/components/checkbox/checkbox-styles.module.scss
@@ -59,3 +59,34 @@ input[type="checkbox"] {
height: 10px;
width: 10px;
}
+
+.progressBar {
+ position: relative;
+ width: 20px;
+ height: 20px;
+}
+
+.circle {
+ height: 100%;
+ right: 0px;
+ position: absolute;
+ border: solid 5px $alto;
+ border-top-color: $robins-egg-blue;
+ border-radius: 50%;
+}
+
+.border {
+ width: 100%;
+ transform: rotate(135deg);
+ animation: spin 1.3s steps(2) .2s infinite;
+ -webkit-animation: spin 1.3s linear infinite;
+}
+
+@keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
diff --git a/src/components/layer-toggle/checkbox-type/component.jsx b/src/components/layer-toggle/checkbox-type/component.jsx
index c27556cf7..6ebf3e0ae 100644
--- a/src/components/layer-toggle/checkbox-type/component.jsx
+++ b/src/components/layer-toggle/checkbox-type/component.jsx
@@ -17,6 +17,7 @@ function CheckboxType({
onOpacityClick,
onBringToBackClick,
onBringToFrontClick,
+ showProgress,
}) {
return (
{isChecked && !disabled && (
diff --git a/src/components/layer-toggle/component.jsx b/src/components/layer-toggle/component.jsx
index 1628c64c9..12326e7d5 100644
--- a/src/components/layer-toggle/component.jsx
+++ b/src/components/layer-toggle/component.jsx
@@ -24,6 +24,7 @@ function LayerToggleComponent({
handleBringToBackClick,
handleBringToFrontClick,
className,
+ showProgress,
}) {
return type === 'radio' ? (
);
diff --git a/src/components/radio-button/radio-button-component.jsx b/src/components/radio-button/radio-button-component.jsx
index 48684592f..7e0ac7f69 100644
--- a/src/components/radio-button/radio-button-component.jsx
+++ b/src/components/radio-button/radio-button-component.jsx
@@ -45,7 +45,7 @@ function RadioButton({
'visually-hidden': hideLabel,
})}
style={{
- 'margin-top': Array.isArray(option.name) ? '-4px' : '',
+ marginTop: Array.isArray(option.name) ? '-4px' : '',
}}
>
{option && option.name}
diff --git a/src/containers/sidebars/aoi-sidebar/sidebar-card-content/component.jsx b/src/containers/sidebars/aoi-sidebar/sidebar-card-content/component.jsx
index 43bc5986d..a7f65dc7c 100644
--- a/src/containers/sidebars/aoi-sidebar/sidebar-card-content/component.jsx
+++ b/src/containers/sidebars/aoi-sidebar/sidebar-card-content/component.jsx
@@ -99,9 +99,9 @@ function SidebarCard({
const isCustom = contextualData?.isCustom;
const underProtectionPercentage = isCustom
- ? contextualData?.percentage
- : contextualData?.protectionPercentage;
- const spi = contextualData?.SPI;
+ ? parseFloat(contextualData?.percentage)
+ : parseFloat(contextualData?.protectionPercentage);
+ const spi = parseFloat(contextualData?.SPI);
return (
diff --git a/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/component.jsx b/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/component.jsx
index bedc0629f..b6df72028 100644
--- a/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/component.jsx
+++ b/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/component.jsx
@@ -19,6 +19,7 @@ import {
HIGHER_AREA_SIZE_LIMIT,
CLEAR_SELECTIONS,
} from 'constants/analyze-areas-constants';
+import { HALF_EARTH_FUTURE_TILE_LAYER } from 'constants/layers-slugs';
import { SEARCH_TYPES } from 'constants/search-location-constants';
import radioTheme from 'styles/themes/radio-theme.module.scss';
@@ -53,6 +54,7 @@ function AnalyzeAreasCardComponent({
sketchTooltipType,
updatedGeometry,
setUpdatedGeometry,
+ showProgress,
}) {
const t = useT();
const locale = useLocale();
@@ -147,6 +149,12 @@ function AnalyzeAreasCardComponent({
theme={radioTheme}
/>
)}
+ {option.slug === HALF_EARTH_FUTURE_TILE_LAYER &&
+ showProgress && (
+
+ )}
);
})}
diff --git a/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/index.js b/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/index.js
index d9892fed7..48c907dc0 100644
--- a/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/index.js
+++ b/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/index.js
@@ -120,6 +120,8 @@ function AnalyzeAreasContainer(props) {
const [selectedOption, setSelectedOption] = useState(
precalculatedAOIOptions[0]
);
+ const [showProgress, setShowProgress] = useState(false);
+ const [isFirstLoad, setIsFirstLoad] = useState(true);
const [sketchWidgetMode, setSketchWidgetMode] = useState('create');
const [isPromptModalOpen, setPromptModalOpen] = useState(false);
const [promptModalContent, setPromptModalContent] = useState({
@@ -133,6 +135,10 @@ function AnalyzeAreasContainer(props) {
(option) => option.title === selectedAnalysisLayer
)
);
+
+ if (selectedAnalysisLayer === HALF_EARTH_FUTURE_TILE_LAYER) {
+ setIsFirstLoad(false);
+ }
}, [selectedAnalysisLayer, precalculatedAOIOptions, setSelectedOption]);
const postDrawCallback = (geometry) => {
@@ -286,10 +292,22 @@ function AnalyzeAreasContainer(props) {
}
};
- const handleOptionSelection = (option) => {
+ const handleOptionSelection = async (option) => {
+ if (option?.slug === HALF_EARTH_FUTURE_TILE_LAYER && isFirstLoad) {
+ setShowProgress(true);
+ }
handleLayerToggle(option?.slug);
changeUI({ selectedAnalysisLayer: option?.slug });
setTooltipIsVisible(false);
+
+ view.on('layerview-create', (event) => {
+ if (event.layer.id === HALF_EARTH_FUTURE_TILE_LAYER) {
+ if (isFirstLoad) {
+ setShowProgress(false);
+ setIsFirstLoad(false);
+ }
+ }
+ });
};
const handlePromptModalToggle = () => setPromptModalOpen(!isPromptModalOpen);
@@ -314,6 +332,7 @@ function AnalyzeAreasContainer(props) {
setSketchTooltipType={setSketchTooltipType}
setUpdatedGeometry={setUpdatedGeometry}
updatedGeometry={updatedGeometry}
+ showProgress={showProgress}
/>
);
}
diff --git a/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/styles.module.scss b/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/styles.module.scss
index edcd5a3ff..cf4cfa715 100644
--- a/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/styles.module.scss
+++ b/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/styles.module.scss
@@ -234,3 +234,38 @@
background-color: $white;
}
}
+
+.radioContainer{
+ display: flex;
+}
+
+.progressBar {
+ position: relative;
+ width: 20px;
+ height: 20px;
+}
+
+.circle {
+ height: 100%;
+ right: 0px;
+ position: absolute;
+ border: solid 5px $alto;
+ border-top-color: $robins-egg-blue;
+ border-radius: 50%;
+}
+
+.border {
+ width: 100%;
+ transform: rotate(135deg);
+ animation: spin 1.3s steps(2) .2s infinite;
+ -webkit-animation: spin 1.3s linear infinite;
+}
+
+@keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
diff --git a/src/containers/sidebars/map-layers/component.jsx b/src/containers/sidebars/map-layers/component.jsx
index 73d521c44..48645c338 100644
--- a/src/containers/sidebars/map-layers/component.jsx
+++ b/src/containers/sidebars/map-layers/component.jsx
@@ -31,6 +31,7 @@ function MapLayers({
activeCategory={activeCategory}
handleGlobeUpdating={handleGlobeUpdating}
map={map}
+ view={view}
onboardingStep={onboardingStep}
onboardingType={onboardingType}
waitingInteraction={waitingInteraction}
diff --git a/src/containers/sidebars/map-layers/protected-areas-sidebar-card/protected-areas-sidebar-card-component.jsx b/src/containers/sidebars/map-layers/protected-areas-sidebar-card/protected-areas-sidebar-card-component.jsx
index 5bf4fe201..662fbf839 100644
--- a/src/containers/sidebars/map-layers/protected-areas-sidebar-card/protected-areas-sidebar-card-component.jsx
+++ b/src/containers/sidebars/map-layers/protected-areas-sidebar-card/protected-areas-sidebar-card-component.jsx
@@ -42,6 +42,7 @@ function ProtectedAreasSidebarCardComponent({
onboardingType,
waitingInteraction,
changeUI,
+ showProgress,
}) {
const t = useT();
const locale = useLocale();
@@ -146,6 +147,7 @@ function ProtectedAreasSidebarCardComponent({
type="checkbox"
variant="light"
key={layer.value}
+ showProgress={showProgress}
activeLayers={activeLayers}
onChange={handleLayerToggle}
themeCategorySlug={FUTURE_PLACES_SLUG}
diff --git a/src/containers/sidebars/map-layers/protected-areas-sidebar-card/protected-areas-sidebar-card.js b/src/containers/sidebars/map-layers/protected-areas-sidebar-card/protected-areas-sidebar-card.js
index 4c65efa2f..ebf1bb5a1 100644
--- a/src/containers/sidebars/map-layers/protected-areas-sidebar-card/protected-areas-sidebar-card.js
+++ b/src/containers/sidebars/map-layers/protected-areas-sidebar-card/protected-areas-sidebar-card.js
@@ -6,6 +6,7 @@ import * as urlActions from 'actions/url-actions';
import { layerManagerToggle } from 'utils/layer-manager-utils';
+import { HALF_EARTH_FUTURE_TILE_LAYER } from 'constants/layers-slugs';
import { LAYERS_CATEGORIES } from 'constants/mol-layers-configs';
import Component from './protected-areas-sidebar-card-component';
@@ -14,7 +15,10 @@ import mapStateToProps from './protected-areas-sidebar-card-selectors';
const actions = { ...metadataActions, ...urlActions };
function Container(props) {
- const { activeLayers, changeGlobe } = props;
+ const { activeLayers, changeGlobe, view } = props;
+
+ const [showProgress, setShowProgress] = useState(false);
+ const [isFirstLoad, setIsFirstLoad] = useState(true);
const [selectedLayers, setSelectedLayers] = useState([]);
@@ -27,6 +31,19 @@ function Container(props) {
setSelectedLayers([...selectedLayers, option.value]);
}
+ if (option.value === HALF_EARTH_FUTURE_TILE_LAYER && isFirstLoad) {
+ setShowProgress(true);
+ }
+
+ view?.on('layerview-create', (event) => {
+ if (event.layer.id === HALF_EARTH_FUTURE_TILE_LAYER) {
+ if (isFirstLoad) {
+ setShowProgress(false);
+ setIsFirstLoad(false);
+ }
+ }
+ });
+
layerManagerToggle(
option.value,
activeLayers,
@@ -39,6 +56,7 @@ function Container(props) {
);