Implemented the onLoadingStateChanged callback

Author: Franco Bugnano

lib/src/chatbox.dart

@@ -1,4 +1,5 @@
 import 'dart:convert';
+import 'dart:async';
 
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -15,6 +16,7 @@ import './predicate.dart';
 
 typedef SendMessageHandler = void Function(SendMessageEvent event);
 typedef TranslationToggledHandler = void Function(TranslationToggledEvent event);
+typedef LoadingStateHandler = void Function(LoadingState state);
 
 class SendMessageEvent {
   final ConversationData conversation;
@@ -36,6 +38,8 @@ class TranslationToggledEvent {
     isEnabled = json['isEnabled'];
 }
 
+enum LoadingState { loading, loaded }
+
 /// A messaging UI for just a single conversation.
 ///
 /// Create a Chatbox through [Session.createChatbox] and then call [mount] to show it.
@@ -57,6 +61,7 @@ class ChatBox extends StatefulWidget {
 
   final SendMessageHandler? onSendMessage;
   final TranslationToggledHandler? onTranslationToggled;
+  final LoadingStateHandler? onLoadingStateChanged;
 
   const ChatBox({
     Key? key,
@@ -73,6 +78,7 @@ class ChatBox extends StatefulWidget {
     this.asGuest,
     this.onSendMessage,
     this.onTranslationToggled,
+    this.onLoadingStateChanged,
   }) : super(key: key);
 
   @override
@@ -121,6 +127,10 @@ class ChatBoxState extends State<ChatBox> {
       // If it's the first time that the widget is built, then build everything
       _webViewCreated = true;
 
+      // Here a Timer is needed, as we can't change the widget's state while the widget
+      // is being constructed, and the callback may very possibly change the state
+      Timer.run(() => widget.onLoadingStateChanged?.call(LoadingState.loading));
+
       execute('let chatBox;');
 
       _createSession();
@@ -161,6 +171,7 @@ class ChatBoxState extends State<ChatBox> {
       javascriptChannels: <JavascriptChannel>{
         JavascriptChannel(name: 'JSCSendMessage', onMessageReceived: _jscSendMessage),
         JavascriptChannel(name: 'JSCTranslationToggled', onMessageReceived: _jscTranslationToggled),
+        JavascriptChannel(name: 'JSCLoadingState', onMessageReceived: _jscLoadingState),
     });
   }
 
@@ -180,6 +191,23 @@ class ChatBoxState extends State<ChatBox> {
     execute('options["me"] = $variableName;');
 
     execute('const session = new Talk.Session(options);');
+
+    execute('''
+      const observer = new MutationObserver((mutations) => {
+        for (let mutation of mutations) {
+          for (let node of mutation.addedNodes) {
+            if (node.nodeName.toLowerCase().indexOf('iframe') >= 0) {
+              observer.disconnect();
+              node.addEventListener('load', () => {
+                JSCLoadingState.postMessage('loaded');
+              });
+            }
+          }
+        }
+      });
+
+      observer.observe(document.getElementById('talkjs-container'), {childList: true});
+    ''');
   }
 
   void _createChatBox() {
@@ -339,6 +367,14 @@ class ChatBoxState extends State<ChatBox> {
     widget.onTranslationToggled?.call(TranslationToggledEvent.fromJson(json.decode(message.message)));
   }
 
+  void _jscLoadingState(JavascriptMessage message) {
+    if (kDebugMode) {
+      print('📗 chatbox._jscLoadingState: ${message.message}');
+    }
+
+    widget.onLoadingStateChanged?.call(LoadingState.loaded);
+  }
+
   /// For internal use only. Implementation detail that may change anytime.
   ///
   /// Return a string with a unique ID

lib/src/conversationlist.dart

@@ -1,4 +1,5 @@
 import 'dart:convert';
+import 'dart:async';
 
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -10,6 +11,7 @@ import './session.dart';
 import './conversation.dart';
 import './user.dart';
 import './predicate.dart';
+import './chatbox.dart';
 
 typedef SelectConversationHandler = void Function(SelectConversationEvent event);
 
@@ -80,6 +82,7 @@ class ConversationList extends StatefulWidget {
   final ConversationPredicate feedFilter;
 
   final SelectConversationHandler? onSelectConversation;
+  final LoadingStateHandler? onLoadingStateChanged;
 
   const ConversationList({
     Key? key,
@@ -88,6 +91,7 @@ class ConversationList extends StatefulWidget {
     this.theme,
     this.feedFilter = const ConversationPredicate(),
     this.onSelectConversation,
+    this.onLoadingStateChanged,
   }) : super(key: key);
 
   @override
@@ -121,6 +125,10 @@ class ConversationListState extends State<ConversationList> {
     if (!_webViewCreated) {
       _webViewCreated = true;
 
+      // Here a Timer is needed, as we can't change the widget's state while the widget
+      // is being constructed, and the callback may very possibly change the state
+      Timer.run(() => widget.onLoadingStateChanged?.call(LoadingState.loading));
+
       _createSession();
       _createConversationList();
       // feedFilter is set as an option for the inbox
@@ -142,6 +150,7 @@ class ConversationListState extends State<ConversationList> {
       onPageFinished: _onPageFinished,
       javascriptChannels: <JavascriptChannel>{
         JavascriptChannel(name: 'JSCSelectConversation', onMessageReceived: _jscSelectConversation),
+        JavascriptChannel(name: 'JSCLoadingState', onMessageReceived: _jscLoadingState),
     });
   }
 
@@ -161,6 +170,23 @@ class ConversationListState extends State<ConversationList> {
     execute('options["me"] = $variableName;');
 
     execute('const session = new Talk.Session(options);');
+
+    execute('''
+      const observer = new MutationObserver((mutations) => {
+        for (let mutation of mutations) {
+          for (let node of mutation.addedNodes) {
+            if (node.nodeName.toLowerCase().indexOf('iframe') >= 0) {
+              observer.disconnect();
+              node.addEventListener('load', () => {
+                JSCLoadingState.postMessage('loaded');
+              });
+            }
+          }
+        }
+      });
+
+      observer.observe(document.getElementById('talkjs-container'), {childList: true});
+    ''');
   }
 
   void _createConversationList() {
@@ -243,6 +269,14 @@ class ConversationListState extends State<ConversationList> {
     widget.onSelectConversation?.call(SelectConversationEvent.fromJson(json.decode(message.message)));
   }
 
+  void _jscLoadingState(JavascriptMessage message) {
+    if (kDebugMode) {
+      print('📗 conversationlist._jscLoadingState: ${message.message}');
+    }
+
+    widget.onLoadingStateChanged?.call(LoadingState.loaded);
+  }
+
   /// For internal use only. Implementation detail that may change anytime.
   ///
   /// Return a string with a unique ID