chore(example): Improve romanization feedback to end user

Author: bdlukaa

example/lib/app.dart

@@ -36,7 +36,7 @@ class App extends StatelessComponent {
                 .text('Dart Romanize'),
                 p(
                   styles: Styles(
-                    margin: Spacing.only(top: Unit.pixels(8)),
+                    margin: Spacing.all(Unit.pixels(8)),
                     color: Color('#6b7280'),
                     fontSize: Unit.rem(1),
                   ),

example/lib/main.dart

@@ -9,6 +9,7 @@ void main() async {
   _chinese();
   _hebrew();
   _multiLanguages();
+  _analyze();
 }
 
 void _korean() {
@@ -88,11 +89,10 @@ void _hebrew() {
   print('Hebrew Romanization: \n$hebrewOutput');
 }
 
-void _multiLanguages() {
-  final multiLanguagesText = '''Mixed Script Stress Test:
+const multiLanguagesText = '''Mixed Script Stress Test:
 -------------------------
 1. CJK Ambiguity (Should detect Chinese vs Japanese context):
-   中文 (Chinese) vs 日本語 (Japanese)
+   中文 (Chinese) vs 日本語 (Japanese will likely fail)
    你好世界 (Hello World - CN) mixed with こんにちは (Hello - JP)
    東京 (Tokyo - JP/CN chars) vs 北京 (Beijing - CN)
    
@@ -121,6 +121,18 @@ void _multiLanguages() {
    And finally Hebrew: ולבסוף עברית.
    
    End of Stress Test.''';
+void _multiLanguages() {
   final multiLanguagesOutput = TextRomanizer.romanize(multiLanguagesText);
   print('Multi Languages Romanization: \n$multiLanguagesOutput');
 }
+
+void _analyze() {
+  final output = TextRomanizer.analyze(multiLanguagesText)
+      .map(
+        (e) {
+          return e.romanizedText;
+        },
+      )
+      .join('');
+  print('Analyze Romanization: \n$output');
+}

example/lib/pages/home.dart

@@ -1,4 +1,5 @@
 import 'package:example/main.client.dart';
+import 'package:example/main.dart';
 import 'package:jaspr/dom.dart';
 import 'package:jaspr/jaspr.dart';
 import 'package:romanize/romanize.dart';
@@ -12,8 +13,8 @@ class Home extends StatefulComponent {
 }
 
 class _HomeState extends State<Home> {
-  String _text = '안녕하세요, 만나서 반갑습니다.';
-  late List<RomanizedText> _romanized = TextRomanizer.analyze(_text);
+  String _text = multiLanguagesText;
+  late Future<List<RomanizedText>> _romanized = service.convert(_text);
 
   void _syncScroll(web.Event event, String otherId) {
     final source = event.target as web.HTMLElement;
@@ -70,10 +71,10 @@ class _HomeState extends State<Home> {
     final sectionStyle = Styles(
       display: Display.flex,
       height: Unit.percent(70),
-      minWidth: Unit.pixels(300),
+      minWidth: Unit.pixels(200),
       flexDirection: FlexDirection.column,
       gap: Gap.all(Unit.pixels(12)),
-      flex: Flex(grow: 1, shrink: 0, basis: Unit.pixels(400)),
+      flex: Flex(grow: 1, shrink: 0, basis: Unit.pixels(200)),
     );
 
     final labelStyle = Styles(
@@ -100,9 +101,10 @@ class _HomeState extends State<Home> {
             },
             placeholder: 'Type your text here...',
             onInput: (text) async {
-              _text = text;
-              _romanized = await service.convert(text);
-              if (mounted) setState(() {});
+              setState(() {
+                _text = text;
+                _romanized = service.convert(text);
+              });
             },
             required: true,
             spellCheck: SpellCheck.isFalse,
@@ -114,30 +116,39 @@ class _HomeState extends State<Home> {
         ]),
         div(styles: sectionStyle, [
           h3(styles: labelStyle, [.text('Output')]),
-          div(
-            id: 'output-area',
-            events: {
-              'scroll': (e) => _syncScroll(e, 'input-area'),
-            },
-            styles: textareaStyle.combine(
-              Styles(
-                overflow: Overflow.auto,
-                whiteSpace: WhiteSpace.preWrap,
-                backgroundColor: Color('#f9fafb'),
-                raw: {
-                  'word-break': 'break-word',
+          FutureBuilder<List<RomanizedText>>(
+            future: _romanized,
+            builder: (context, snapshot) {
+              return div(
+                id: 'output-area',
+                events: {
+                  'scroll': (e) => _syncScroll(e, 'input-area'),
                 },
-              ),
-            ),
-            _romanized.map((item) {
-              return span(
-                styles: Styles(
-                  color: _getColorForLanguage(item.language),
-                  fontWeight: FontWeight.w500,
+                styles: textareaStyle.combine(
+                  Styles(
+                    overflow: Overflow.auto,
+                    whiteSpace: WhiteSpace.preWrap,
+                    backgroundColor: Color('#f9fafb'),
+                    raw: {
+                      'word-break': 'break-word',
+                    },
+                  ),
                 ),
-                [.text(item.romanizedText)],
+                snapshot.hasData
+                    ? snapshot.data!.map((item) {
+                        return span(
+                          styles: Styles(
+                            color: _getColorForLanguage(item.language),
+                            fontWeight: FontWeight.w500,
+                          ),
+                          [.text(item.romanizedText)],
+                        );
+                      }).toList()
+                    : [
+                        .text('Loading resources...'),
+                      ],
               );
-            }).toList(),
+            },
           ),
         ]),
       ],