feat(globe): fade in (#1153)

* feat(globe): cache marker generation

* feat(globe): fade in on mount

src/scripts/components/main/globe/globe.styl

@@ -6,3 +6,21 @@
   flex-grow: 1
   flex-basis: 50%
   height: 100%
+  opacity: 0
+
+.fadeIn
+  animation: fadeIn 2s
+  animation-timing-function: ease-out
+  animation-fill-mode: forwards
+
+.fastFadeIn
+  animation: fadeIn 0.5s
+  animation-timing-function: ease-out
+  animation-fill-mode: forwards
+
+@keyframes fadeIn
+  0%
+    opacity: 0
+
+  100%
+    opacity: 1

src/scripts/components/main/globe/globe.tsx

@@ -16,6 +16,7 @@ import {
   Viewer,
   ImageryLayer
 } from 'cesium';
+import cx from 'classnames';
 
 import {
   getGlobeView,
@@ -112,6 +113,7 @@ const Globe: FunctionComponent<Props> = ({
   onMouseDown
 }) => {
   const [viewer, setViewer] = useState<Viewer | null>(null);
+  const [firstTilesLoaded, setFirstTilesLoaded] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
   const lastNowRef = useRef<number | null>(null);
 
@@ -322,11 +324,37 @@ const Globe: FunctionComponent<Props> = ({
     }
   }, [spinning, viewer, projectionState.morphTime, spin]);
 
-  useMarkers(viewer, markers);
+  // check that all visible tiles have been loaded
+  useEffect(() => {
+    const handler = (tiles: number) => {
+      if (tiles < 1) {
+        setFirstTilesLoaded(true);
+        // eslint-disable-next-line no-unused-expressions
+        viewer?.scene.globe.tileLoadProgressEvent.removeEventListener(handler);
+      }
+    };
+
+    // eslint-disable-next-line no-unused-expressions
+    viewer?.scene.globe.tileLoadProgressEvent.addEventListener(handler);
+  }, [viewer]);
+
+  const markersReady = useMarkers(viewer, markers, firstTilesLoaded);
+
+  let fadeClass = null;
+
+  // slow fade in when we have markers and everything is ready to render
+  if (firstTilesLoaded && markersReady && markers.length) {
+    fadeClass = styles.fadeIn;
+  }
+
+  // fast fade in when no markers and everything is ready to render
+  if (firstTilesLoaded && markersReady && markers.length === 0) {
+    fadeClass = styles.fastFadeIn;
+  }
 
   return (
     <div
-      className={styles.globe}
+      className={cx(styles.globe, fadeClass)}
       onMouseEnter={() => onMouseEnter()}
       onTouchStart={() => onTouchStart()}
       ref={ref}

src/scripts/hooks/use-markers.ts

@@ -1,4 +1,4 @@
-import {useEffect} from 'react';
+import {useEffect, useState} from 'react';
 import {useDispatch} from 'react-redux';
 import {useHistory} from 'react-router-dom';
 import {
@@ -12,13 +12,18 @@ import {createMarker} from '../libs/create-marker';
 
 import {Marker} from '../types/marker-type';
 
-export const useMarkers = (viewer: Viewer | null, markers: Marker[]) => {
+export const useMarkers = (
+  viewer: Viewer | null,
+  markers: Marker[],
+  firstTilesLoaded: boolean
+) => {
   const history = useHistory();
   const dispatch = useDispatch();
+  const [ready, setReady] = useState(false);
 
   // create marker for each story
   useEffect(() => {
-    if (!viewer) {
+    if (!viewer || !firstTilesLoaded) {
       return;
     }
 
@@ -38,11 +43,12 @@ export const useMarkers = (viewer: Viewer | null, markers: Marker[]) => {
     Promise.all(markers.map(marker => createMarker(marker))).then(entities => {
       viewer.entities.removeAll();
       entities.forEach(entity => viewer.entities.add(entity));
+      setReady(true);
     });
 
     // eslint-disable-next-line consistent-return
     return () => handler.destroy();
-  }, [dispatch, history, markers, viewer]);
+  }, [dispatch, history, markers, viewer, firstTilesLoaded]);
 
-  return;
+  return ready;
 };

src/scripts/libs/create-marker.ts

@@ -12,7 +12,13 @@ import NotesEsaBold from '../../../assets/fonts/NotesEsaBol.otf';
 
 import {Marker} from '../types/marker-type';
 
+const cache: Record<string, Entity> = {};
+
 export async function createMarker(marker: Marker): Promise<Entity> {
+  if (cache[marker.title]) {
+    return Promise.resolve(cache[marker.title]);
+  }
+
   const canvas = document.createElement('canvas');
   canvas.width = 350;
   canvas.height = 32;
@@ -44,6 +50,8 @@ export async function createMarker(marker: Marker): Promise<Entity> {
       entity.addProperty('markerLink');
       // @ts-ignore
       entity.markerLink = marker.link;
+
+      cache[marker.title] = entity;
       resolve(entity);
     };
   });