[iOS] ListView with UIKitView (NativeAds) Lags #103014

b3nni97 · 2022-05-04T02:23:05Z

Hi,
If you use NativeAds in a list, you will notice slight janks when scrolling.
This is harder to see on the video than in real life.

Now there are several ways to improve this:

Make UIKitView cheaper to create
Create a UIKitView pool which can be used by the ads in the list (I don't know if this is possible here)
You can see that there are jerks when initializing the ad, but as soon as the ad is loaded it runs smoothly.

I hope there is a solution for this, because this makes the experience with an app monetized with AdMob very bad.

Target Platform: iOS
**Devices: iPhone X **

Reproducible example

MaterialApp(
      showPerformanceOverlay: true,
      home: ListView.builder(
        itemBuilder: (context, index) {
          var showAd = index % 5 == 0;

          if (showAd) {
            return ListTileNativeAd();
          } else {
            return Container(
              height: 80,
              decoration: BoxDecoration(
                color: Colors.blue,
                border: Border.all(),
              ),
            );
          }
        },
      ),
    );

class ListTileNativeAd extends StatefulWidget {
  @override
  State<ListTileNativeAd> createState() => _ListTileNativeAdState();
}

class _ListTileNativeAdState extends State<ListTileNativeAd> {
  NativeAd _ad;

  bool _isAdLoaded = false;

  @override
  void initState() {
    super.initState();

    _ad = NativeAd(
      adUnitId:
          'ca-app-pub-3940256099942544/3986624511', //AdHelper.nativeAdUnitId,
      factoryId: 'listTile',
      request: AdRequest(),
      listener: NativeAdListener(
        onAdLoaded: (_) {
          setState(() {
            _isAdLoaded = true;
          });
        },
        onAdFailedToLoad: (ad, error) {
          // Releases an ad resource when it fails to load
          ad.dispose();

          print('Ad load failed (code=${error.code} message=${error.message})');
        },
      ),
    );

    _ad.load();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
       alignment: Alignment.center,
      child: _isAdLoaded ? AdWidget(ad: _ad) : Container(),
    );
  }
}

Logs

Flutter (Channel master, 2.13.0-0.0.pre.880, on macOS 12.2.1 21D62 darwin-arm)

RPReplay_Final1651629797.1.mov

The text was updated successfully, but these errors were encountered:

maheshmnj · 2022-05-04T08:10:20Z

Hi @b3nni97, Thanks for filing the issue. Is the jank related to listview scroll or loading of the ads while scrolling? Can you share a minimal and complete sample project?

b3nni97 · 2022-05-04T18:41:25Z

hi @maheshmnj, I used the documentation here so you can run the example I showed above. https://codelabs.developers.google.com/codelabs/admob-inline-ads-in-flutter#0
(you have to change some files in the iOS/Android folder)

So it doesn't jerk yet when you just call _ad.load() but only when the ad has loaded and you create the UIKitView object. At this moment it jerks slightly (so I think it's because of initializing the UIKitView).
Once the ad is completely loaded and displayed, the jerking stops. (see video).

You can see in the performance overlay that the app sometimes reaches over 16ms in the raster thread (17.7ms can be seen at the end).

darshankawar · 2022-05-05T09:17:10Z

Thanks for the report. Using the code sample provided, running it on iPhone 6s (OS 15.3.1) shows that scrolling with native ads (coming from google_mobile_ads plugin), shows lag in the UI as below:

RPReplay-Final1651738404.MP4

But I am not 100% sure if this is an issue with platform-views on iOS or with google_mobile_ads issue integration with platform-views.

stable, master flutter doctor -v


[✓] Flutter (Channel stable, 2.10.5, on macOS 12.2.1 21D62 darwin-x64, locale
    en-GB)
    • Flutter version 2.10.5 at /Users/dhs/documents/fluttersdk/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5464c5bac7 (12 hours ago), 2022-04-18 09:55:37 -0700
    • Engine revision 57d3bac3dd
    • Dart version 2.16.2
    • DevTools version 2.9.2

[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] VS Code (version 1.62.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.21.0

[✓] Connected device (5 available)
    • SM G975F (mobile)       • RZ8M802WY0X • android-arm64   • Android 11 (API 30)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 98.0.4758.80

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

[✓] Flutter (Channel master, 2.13.0-0.0.pre.907, on macOS 12.2.1 21D62
    darwin-x64, locale en-GB)
    • Flutter version 2.13.0-0.0.pre.907 at
      /Users/dhs/documents/fluttersdk/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f7010e00e4 (20 minutes ago), 2022-05-05 00:39:11 -0400
    • Engine revision 912da8da47
    • Dart version 2.18.0 (build 2.18.0-84.0.dev)
    • DevTools version 2.12.2
    
[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] VS Code (version 1.62.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.21.0

[✓] Connected device (5 available)
    • SM G975F (mobile)       • RZ8M802WY0X • android-arm64   • Android 11 (API 30)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 98.0.4758.80

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

cyanglaz · 2022-05-05T17:06:43Z

It looks like the ads took sometime to load? We can try the same app, replacing ads with a different platform view (Maybe google map?) to compare the result.

marcellocamara · 2022-05-25T21:40:35Z

I found performance issues with Flutter 3.0.1, with Dart 2.17.1, using the google_mobile_ads 1.2.0 on iOS too
(Android works pretty well).

Obs.: Using LARGE_BANNER AD.
I think this is realted to google_mobile_ads and iOS. Not only the Native Ad, as mentioned.

euphio · 2022-07-04T12:04:29Z

It looks like the ads took sometime to load? We can try the same app, replacing ads with a different platform view (Maybe google map?) to compare the result.

I'm experiencing this issue too. I replaced the native ad view with an embedded native map view and the behaviour was the same (noticeable jank /lag on the scroll view). Behaviour only affects iOS it seems.

Nico3652 · 2022-07-13T06:50:44Z

This is a plateform view issue.
If we place native view instead of ads in list we get the same lag result as I explained and recorded in my related issue #107486

This is not a time-to-load problem for me, if we wait for loading and do scrolling or animating the screen is lagging.
All plug-in using platform-views I tried is freezing the screen while a scrolling / or animating something.

Without the Google ads sdk :
I also tried to implement native ads in full swift SDK, as I did with a native IOS app, and create my own platform view to display it in flutter and the result is EXACTLY the same.

A solution would be to stop using platform views in the Google ads and display flutter widget instead as all others widgets like video_player which is working great in list etc...
Or fix/improve the platform view render which is very heavy for flutter

The problem is the same for Android for us but may be a little less lagging.

cyanglaz · 2022-11-09T23:51:27Z

I think this is a dup with #107486, I'm going to close this one because I left my performance analysis on the other issue.

github-actions · 2022-11-24T06:01:06Z

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

b3nni97 added the from: performance template Issues created via a performance issue template label May 4, 2022

maheshmnj added in triage Presently being triaged by the triage team and removed from: performance template Issues created via a performance issue template labels May 4, 2022

maheshmnj added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label May 4, 2022

github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label May 4, 2022

goderbauer added the P2 Important issues not at the top of the work list label May 12, 2022

b3nni97 mentioned this issue Jul 13, 2022

Platform-View List / Grid scrolling is janky on IOS / Android #107486

Closed

cyanglaz closed this as completed Nov 9, 2022

darshankawar added the r: duplicate Issue is closed as a duplicate of an existing issue label Nov 10, 2022

github-actions bot locked as resolved and limited conversation to collaborators Nov 24, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[iOS] ListView with UIKitView (NativeAds) Lags #103014

[iOS] ListView with UIKitView (NativeAds) Lags #103014

b3nni97 commented May 4, 2022 •

edited

maheshmnj commented May 4, 2022

b3nni97 commented May 4, 2022

darshankawar commented May 5, 2022

cyanglaz commented May 5, 2022

marcellocamara commented May 25, 2022 •

edited

euphio commented Jul 4, 2022

Nico3652 commented Jul 13, 2022

cyanglaz commented Nov 9, 2022

github-actions bot commented Nov 24, 2022

[iOS] ListView with UIKitView (NativeAds) Lags #103014

[iOS] ListView with UIKitView (NativeAds) Lags #103014

Comments

b3nni97 commented May 4, 2022 • edited

Logs

maheshmnj commented May 4, 2022

b3nni97 commented May 4, 2022

darshankawar commented May 5, 2022

cyanglaz commented May 5, 2022

marcellocamara commented May 25, 2022 • edited

euphio commented Jul 4, 2022

Nico3652 commented Jul 13, 2022

cyanglaz commented Nov 9, 2022

github-actions bot commented Nov 24, 2022

b3nni97 commented May 4, 2022 •

edited

marcellocamara commented May 25, 2022 •

edited