Cleanup indexes at start time and waith till the cleanup is done before rendering the whiteboard.

src/components/map/map.tsx

@@ -1,4 +1,4 @@
-import react, { useMemo, useEffect } from 'react';
+import react, { useMemo, useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { mapActions } from '../../store/map';
 import _ from 'lodash';
@@ -36,9 +36,12 @@ const Map: react.FC<{}> = (props: {}) => {
   );
 
   const db = useDB();
+
+  const [dbReady, setDbReady] = useState(false);
+
   useEffect(() => {
     window.addEventListener('resize', debouncedResizeHandler);
-    initDb(db);
+    initDb(db, setDbReady);
   }, []);
 
   return (
@@ -48,7 +51,7 @@ const Map: react.FC<{}> = (props: {}) => {
           <Slippy>
             <Whiteboard>
               <CurrentLocation />
-              <Gpxes />
+              dbReady && <Gpxes />
             </Whiteboard>
             <Layer>
               <TiledMap />