More-ui-changes

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 (
     <div
       key={option.value}
@@ -35,6 +45,11 @@ function Checkbox({ option, onChange, checked, theme, className, disabled }) {
           />
         )}
       </label>
+      {option.value === HALF_EARTH_FUTURE_TILE_LAYER && showProgress && (
+        <div className={styles.progressBar}>
+          <div className={`${styles.circle} ${styles.border}`} />
+        </div>
+      )}
     </div>
   );
 }

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);
+  }
+}

src/components/layer-toggle/checkbox-type/component.jsx

@@ -17,6 +17,7 @@ function CheckboxType({
   onOpacityClick,
   onBringToBackClick,
   onBringToFrontClick,
+  showProgress,
 }) {
   return (
     <div
@@ -32,6 +33,7 @@ function CheckboxType({
           checked={!disabled && isChecked}
           onChange={onChange}
           className={styles.labelStyles}
+          showProgress={showProgress}
         />
       </div>
       {isChecked && !disabled && (

src/components/layer-toggle/component.jsx

@@ -24,6 +24,7 @@ function LayerToggleComponent({
   handleBringToBackClick,
   handleBringToFrontClick,
   className,
+  showProgress,
 }) {
   return type === 'radio' ? (
     <div
@@ -75,6 +76,7 @@ function LayerToggleComponent({
         onOpacityClick={handleOpacityClick}
         onBringToBackClick={handleBringToBackClick}
         onBringToFrontClick={handleBringToFrontClick}
+        showProgress={showProgress}
       />
     </div>
   );

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}

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 (
     <SidebarCardWrapper className={styles.cardWrapper}>
       <div>

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 && (
+                    <div className={styles.progressBar}>
+                      <div className={`${styles.circle} ${styles.border}`} />
+                    </div>
+                  )}
               </div>
             );
           })}

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}
     />
   );
 }

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);
+  }
+}

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}

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}

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) {
     <Component
       selectedLayers={selectedLayers}
       handleLayerToggle={handleLayerToggle}
+      showProgress={showProgress}
       {...props}
     />
   );