perf(street-level): load the MapillaryJS stylesheet with the viewer

The 92 KB stylesheet was vendored into the main CSS, so every page load
paid for it (render-blocking) although the viewer itself is lazy. It now
comes with the lazy chunk: `import('mapillary-js/dist/mapillary.css')`
next to `import('mapillary-js')`, which Vite applies before the import
resolves, so the viewer is styled from its first frame. Main CSS in a
production build: 386 KB -> 302 KB; the MapillaryJS CSS is its own 84 KB
file. Checked in the dev server that its rules arrive with the viewer.

The vendored copy also named the wrong copyright holder and omitted the
MIT text; it is gone, and THIRD_PARTY_NOTICES.md now records mapillary-js
(MIT, Facebook, Inc. and its affiliates) and its rxjs (Apache-2.0) and
three (MIT) dependencies.

Found in the IC8 review of #768 (P2).

Co-Authored-By: Claude Opus 5.5 <[email protected]>

THIRD_PARTY_NOTICES.md

@@ -1,8 +1,9 @@
 # Third-party software notices
 
 The project depends on third-party npm packages whose own licenses apply. This
-file records the packages added for the browser-local SDR feature; the complete
+file records the packages added for the browser-local SDR feature and the
-resolved dependency inventory remains in `package-lock.json`.
+Street Level viewer; the complete resolved dependency inventory remains in
+`package-lock.json`.
 
 ## Web RTL-SDR
 
@@ -19,3 +20,28 @@ resolved dependency inventory remains in `package-lock.json`.
 - Source: <https://github.com/jtarrio/signals>
 - License: Apache License 2.0
 - License text: <https://www.apache.org/licenses/LICENSE-2.0>
+
+## MapillaryJS
+
+- Package: `mapillary-js` 4.1.2 (loaded on demand by the Street Level viewer,
+  with its stylesheet `dist/mapillary.css`)
+- Author: Copyright (c) Facebook, Inc. and its affiliates
+- Source: <https://github.com/mapillary/mapillary-js>
+- License: MIT
+- License text: <https://github.com/mapillary/mapillary-js/blob/main/LICENSE>
+
+## RxJS (MapillaryJS dependency)
+
+- Package: `rxjs` 7.8.2
+- Author: Google, Inc., Netflix, Inc., Microsoft Corp. and contributors
+- Source: <https://github.com/ReactiveX/rxjs>
+- License: Apache License 2.0
+- License text: <https://www.apache.org/licenses/LICENSE-2.0>
+
+## three.js (MapillaryJS dependency)
+
+- Package: `three` 0.134.0
+- Author: Copyright © 2010-2021 three.js authors
+- Source: <https://github.com/mrdoob/three.js>
+- License: MIT
+- License text: <https://github.com/mrdoob/three.js/blob/dev/LICENSE>

src/layers/streetLevel/providers/mapillary/viewer.js

@@ -31,8 +31,15 @@ export function createMapillaryViewer({ source, render } = {}) {
 
   async function ensureLibrary() {
     if (Library) return Library;
-    // The viewer stylesheet is vendored into src/ui/styles/mapillary-js.css.
+    // The stylesheet comes with the lazy chunk: Vite applies a dynamically
-    Library = await import('mapillary-js');
+    // imported stylesheet before its import resolves, so the viewer's chrome
+    // is styled from the first frame without costing every page load ~90 KB
+    // of render-blocking CSS.
+    const [library] = await Promise.all([
+      import('mapillary-js'),
+      import('mapillary-js/dist/mapillary.css'),
+    ]);
+    Library = library;
     return Library;
   }
 

style.css

@@ -8,10 +8,6 @@
 @import './src/ui/styles/layers.css';
 @import './src/ui/styles/radio.css';
 @import './src/ui/styles/cctv.css';
-/* MapillaryJS's stylesheet is vendored (see its header) because the JS is
-   loaded lazily on first image open while its controls need styling as soon
-   as that first image lands; ~9 KB gzipped. */
-@import './src/ui/styles/mapillary-js.css';
 @import './src/ui/styles/street-level.css';
 @import './src/ui/styles/scenes.css';
 @import './src/ui/styles/bhote-koshi.css';