[web] Batch systemFontChange messages (#17885)

* Batch systemFontChange messages
* Update test for async

lib/web_ui/lib/src/engine/util.dart

@@ -461,11 +461,23 @@ void applyWebkitClipFix(html.Element containerElement) {
 
 final ByteData _fontChangeMessage = JSONMessageCodec().encodeMessage(<String, dynamic>{'type': 'fontsChange'});
 
+// Font load callbacks will typically arrive in sequence, we want to prevent
+// sendFontChangeMessage of causing multiple synchronous rebuilds.
+// This flag ensures we properly schedule a single call to framework.
+bool _fontChangeScheduled = false;
+
 FutureOr<void> sendFontChangeMessage() async {
   if (window._onPlatformMessage != null)
-    window.invokeOnPlatformMessage(
-      'flutter/system',
-      _fontChangeMessage,
-      (_) {},
-    );
+    if (!_fontChangeScheduled) {
+      _fontChangeScheduled = true;
+      // Batch updates into next animationframe.
+      html.window.requestAnimationFrame((num _) {
+        _fontChangeScheduled = false;
+        window.invokeOnPlatformMessage(
+          'flutter/system',
+          _fontChangeMessage,
+              (_) {},
+        );
+      });
+    }
 }

lib/web_ui/test/text/font_loading_test.dart

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 // @dart = 2.6
+import 'dart:async';
 import 'dart:convert';
 import 'dart:html' as html;
 import 'dart:typed_data';
@@ -85,6 +86,9 @@ Future<void> main() async {
           responseType: 'arraybuffer');
       await ui.loadFontFromList(Uint8List.view(response.response),
           fontFamily: 'Blehm');
+      final Completer<void> completer = Completer();
+      html.window.requestAnimationFrame( (_) { completer.complete(true); } );
+      await(completer.future);
       window.onPlatformMessage = oldHandler;
       expect(actualName, 'flutter/system');
       expect(message, '{"type":"fontsChange"}');