Merge pull request #28 from developmentseed/fix/slider-loading-state

Fix react slider loading

Author: vgeorge

web-vite/src/app/cartoslider.tsx

@@ -10,35 +10,33 @@ interface CartoSliderProps {
 
 export function CartoSlider(props: CartoSliderProps) {
   const { isLoading, timestamps, dispatchAppState, currentTimestamp } = props;
-  const lastTimestampIndex = timestamps?.length > 0 ? timestamps.length - 1 : 0;
-
-  const sliderOptions = isLoading
-    ? {
-        max: 1,
-        defaultValue: 1,
-      }
-    : {
-        max: lastTimestampIndex,
-        defaultValue: lastTimestampIndex,
-      };
+  const lastTimestampIndex =
+    !isLoading && timestamps?.length > 0 ? timestamps.length - 1 : 10;
+  const currentTimestampIndex = !isLoading
+    ? timestamps?.indexOf(currentTimestamp)
+    : 10;
 
   return (
     <section class="carto__slider--wrapper">
       <div class="carto__slider--heading">
-        <h4>Changeset Animation</h4>
+        <h4>Change Timeline</h4>
       </div>
       <div class="carto__slider">
         <div class="carto__slider--tools">
           <p>
-            {currentTimestamp && new Date(currentTimestamp).toLocaleString()}
+            {!isLoading && currentTimestamp
+              ? new Date(currentTimestamp).toLocaleString()
+              : "Loading..."}
           </p>
         </div>
         <ReactSlider
           disabled={isLoading}
           className="carto--slider"
           markClassName="slider--mark"
           min={0}
-          {...sliderOptions}
+          max={lastTimestampIndex}
+          defaultValue={lastTimestampIndex}
+          value={currentTimestampIndex}
           thumbClassName="slider--thumb"
           trackClassName="slider--track"
           onChange={(value: number) => {

web-vite/src/index.css

@@ -87,12 +87,14 @@ body {
   display: flex;
   flex-flow: column nowrap;
   padding: 1rem;
+  padding-bottom: 2rem;
 }
 #map {
   min-height: 480px;
   max-height: 100%;
 }
 .maplibregl-popup-content {
+  color: var(--base);
   padding: 1.25rem;
   border-radius: 0.25rem;
   box-shadow: 0 0 1rem 0 rgba(50,50,50,.125);
@@ -311,7 +313,7 @@ li.bar-chart__bar {
   .carto__slider--wrapper {
     display: flex;
     flex-flow: column nowrap;
-    padding: 1rem;
+    padding-bottom: 1rem;
   }
   .carto #map {
     flex: 8;