Capture initial resize event

CHANGELOG.md

@@ -4,6 +4,7 @@
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes
+- Fixes issue with ResizeObserver firing an initial 'resize' event (since 3.0.0-pre.5) ([#2551](https://github.com/maplibre/maplibre-gl-js/issues/2551))
 - _...Add new stuff here..._
 
 ## 3.0.0-pre.8

src/ui/map.test.ts

@@ -803,7 +803,7 @@ describe('Map', () => {
             expect(spyC).not.toHaveBeenCalled();
         });
 
-        test('do resize if trackResize is true (default)', () => {
+        test('do resize if trackResize is true (default)', async () => {
             let observerCallback: Function = null;
             global.ResizeObserver = jest.fn().mockImplementation((c) => ({
                 observe: () => { observerCallback = c; }
@@ -814,8 +814,16 @@ describe('Map', () => {
             const spyA = jest.spyOn(map, '_update');
             const spyB = jest.spyOn(map, 'resize');
 
+            // The initial "observe" event fired by ResizeObserver should be captured/muted
+            // in the map constructor
+
             observerCallback();
+            expect(spyA).not.toHaveBeenCalled();
+            expect(spyB).not.toHaveBeenCalled();
 
+            // Following "observe" events should fire a resize / _update
+
+            observerCallback();
             expect(spyA).toHaveBeenCalled();
             expect(spyB).toHaveBeenCalled();
         });

src/ui/map.ts

@@ -493,7 +493,13 @@ class Map extends Camera {
 
         if (typeof window !== 'undefined') {
             addEventListener('online', this._onWindowOnline, false);
+            let initialResizeEventCaptured = false;
             this._resizeObserver = new ResizeObserver((entries) => {
+                if (!initialResizeEventCaptured) {
+                    initialResizeEventCaptured = true;
+                    return;
+                }
+
                 if (this._trackResize) {
                     this.resize(entries)._update();
                 }

test/integration/browser/browser.test.ts

@@ -48,6 +48,23 @@ describe('Browser tests', () => {
         });
     }, 40000);
 
+    test('Load should fire before resize and moveend', async () => {
+        const firstFiredEvent = await page.evaluate(() => {
+            const map2 = new maplibregl.Map({
+                container: 'map',
+                style: 'https://demotiles.maplibre.org/style.json',
+                center: [10, 10],
+                zoom: 10
+            });
+            return new Promise<string>((resolve, _reject) => {
+                map2.once('resize', () => resolve('resize'));
+                map2.once('moveend', () => resolve('moveend'));
+                map2.once('load', () => resolve('load'));
+            });
+        });
+        expect(firstFiredEvent).toBe('load');
+    }, 20000);
+
     test('Drag to the left', async () => {
 
         const canvas = await page.$('.maplibregl-canvas');