🐛 High CPU usage for NavigationPane

[hariangr]

Describe the bug
I am making an app for MacOS (Yes it's not officially supported), and I notice the high CPU usage for my app (Around 30%). It is weird since MaterialApp based app only use around 2% CPU on idle.

When I comment the NavigationPane code, the CPU usage decreased dramatically (To around 2% as I expect), and when I uncomment the NavigationPane again the CPU usage increased to around 30% again.

To Reproduce
Steps to reproduce the behavior:

1. Create a FluentApp root
2. Create a NavigationView
3. Add a NavigationPane to pane field of the NavigationView

Expected behavior
The CPU usage shouldn't be any higher than 3%

Screenshots

Additional context
The CPU stay high (Even when I idle/do nothing with the app, just keep it on foreground)

Here's the code I use (A new app with fluent_ui ^3.8.0 in pubspec)

import 'dart:io';

import 'package:fluent_ui/fluent_ui.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return FluentApp(
      debugShowCheckedModeBanner: false,
      initialRoute: '/main',
      routes: <String, WidgetBuilder>{
        '/main': (context) => const Entah(),
      },
    );
  }
}

class Entah extends StatelessWidget {
  const Entah({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return NavigationView(
      // pane: NavigationPane(
      //   selected: 0,
      //   displayMode: PaneDisplayMode.open,
      //   items: [
      //     PaneItem(
      //       icon: const Icon(FluentIcons.a_a_d_logo),
      //       title: const Text('Focus Time'),
      //     ),
      //   ],
      //   indicatorBuilder: ({
      //     required BuildContext context,
      //     required NavigationPane pane,
      //     Axis? axis,
      //     required Widget child,
      //   }) {
      //     return StickyNavigationIndicator(
      //       index: 0,
      //       pane: pane,
      //       child: child,
      //       axis: Axis.horizontal,
      //     );
      //   },
      // ),
      content: NavigationBody(
        index: 0,
        children: [
          ScaffoldPage(
            header: PageHeader(
              title: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text("Pomodoro Time"),
                  const SizedBox(height: 12),
                  Wrap(
                    spacing: 8,
                    runSpacing: 8,
                    children: [
                      Button(
                        child:
                            const Icon(FluentIcons.status_circle_question_mark),
                        onPressed: () {},
                      ),
                    ],
                  ),
                ],
              ),
            ),
            content: const Text("He"),
          ),
          const ScaffoldPage(
            header: Text("Hey"),
            content: Text("data"),
          ),
          const ScaffoldPage(
            header: Text("Hey"),
            content: Text("Logout"),
          ),
        ],
      ),
    );
  }
}

[hariangr]

Update, changing the indicator from StickyNavigationIndicator to EndNavigationIndicator fixed the problem. So it's more of StickyIndicator problem than the pane itself

[bdlukaa]

I believed sticky indicator was the issue. Right now, the screen is updated every millisecond to render the sticky indicator, since it's a complex thing.

[henry2man]

@bdlukaa IMHO the "sticky" indicator looks great... but if the toll is having this high CPU consumption I don't know if it's worth keeping. I know that a significant effort will have been made to create and maintain it, but either we find a way to optimize it, or with the current implementation we will consume more energy than if we were mining crypto 😅. Having a polling every millisecond goes right against any of the Flutter performance best practices: https://docs.flutter.dev/perf/rendering/best-practices

I suggest opening a specific development branch with this component (so as not to lose the current code) and remove it from the main code until we find a solution. Or, in the worst case, at least document the method code indicating the current performance problems, "waiting to resolve the issue #173"

[WinXaito]

This problem is less visible on a Windows PC, but the rebuilds are still present.

Currently, the use of EndNavigationIndicator fixes the problem. So in the end, we could replace https://github.com/bdlukaa/fluent_ui/blob/master/lib/src/controls/navigation/navigation_view/pane.dart#L84 with EndNavigationIndicator.

I propose not to disable or remove the sticky from the code.

The problem is here: https://github.com/bdlukaa/fluent_ui/blob/master/lib/src/controls/navigation/navigation_view/indicators.dart#L290
To fix the problem, we should launch the animation only when the pane is changed. So that it doesn't run unnecessarily in a vacuum.

[henry2man]

Currently, the use of EndNavigationIndicator fixes the problem. So in the end, we could replace https://github.com/bdlukaa/fluent_ui/blob/master/lib/src/controls/navigation/navigation_view/pane.dart#L84 with EndNavigationIndicator.

Totally agree to change this, because this indicates that sticky is the default behavior.

I propose not to disable or remove the sticky from the code.

I said I DO love the effect, but I prefer performance over UX, at least until we find a solution to remove this 1ms polling behavior.