optimize rebuilds by sampling input
This commit is contained in:
@@ -13,6 +13,7 @@ import 'package:lensai/features/geckoview/features/search/presentation/widgets/s
|
|||||||
import 'package:lensai/features/geckoview/features/search/presentation/widgets/search_modules/history_suggestions.dart';
|
import 'package:lensai/features/geckoview/features/search/presentation/widgets/search_modules/history_suggestions.dart';
|
||||||
import 'package:lensai/features/geckoview/features/search/presentation/widgets/search_modules/search_suggestions.dart';
|
import 'package:lensai/features/geckoview/features/search/presentation/widgets/search_modules/search_suggestions.dart';
|
||||||
import 'package:lensai/features/geckoview/features/search/presentation/widgets/search_modules/tab_search.dart';
|
import 'package:lensai/features/geckoview/features/search/presentation/widgets/search_modules/tab_search.dart';
|
||||||
|
import 'package:lensai/presentation/hooks/sampled_value_notifier.dart';
|
||||||
import 'package:lensai/utils/uri_parser.dart' as uri_parser;
|
import 'package:lensai/utils/uri_parser.dart' as uri_parser;
|
||||||
|
|
||||||
class SearchScreen extends HookConsumerWidget {
|
class SearchScreen extends HookConsumerWidget {
|
||||||
@@ -27,6 +28,10 @@ class SearchScreen extends HookConsumerWidget {
|
|||||||
final searchTextController = useTextEditingController(
|
final searchTextController = useTextEditingController(
|
||||||
text: initialSearchText,
|
text: initialSearchText,
|
||||||
);
|
);
|
||||||
|
final sampledSearchText = useSampledValueNotifier(
|
||||||
|
source: searchTextController,
|
||||||
|
sampleDuration: const Duration(milliseconds: 150),
|
||||||
|
);
|
||||||
final searchFocusNode = useFocusNode();
|
final searchFocusNode = useFocusNode();
|
||||||
|
|
||||||
final defaultSearchBang = ref.watch(
|
final defaultSearchBang = ref.watch(
|
||||||
@@ -116,9 +121,9 @@ class SearchScreen extends HookConsumerWidget {
|
|||||||
submitSearch: submitSearch,
|
submitSearch: submitSearch,
|
||||||
),
|
),
|
||||||
const SliverToBoxAdapter(child: Divider()),
|
const SliverToBoxAdapter(child: Divider()),
|
||||||
TabSearch(searchTextController: searchTextController),
|
TabSearch(searchTextListenable: sampledSearchText),
|
||||||
FeedSearch(searchTextController: searchTextController),
|
FeedSearch(searchTextNotifier: sampledSearchText),
|
||||||
HistorySuggestions(searchTextController: searchTextController),
|
HistorySuggestions(searchTextListenable: sampledSearchText),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
|||||||
+5
-4
@@ -1,3 +1,4 @@
|
|||||||
|
import 'package:flutter/foundation.dart';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:flutter_markdown/flutter_markdown.dart';
|
import 'package:flutter_markdown/flutter_markdown.dart';
|
||||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||||
@@ -20,9 +21,9 @@ class FeedSearch extends HookConsumerWidget {
|
|||||||
static const _matchPrefix = '***';
|
static const _matchPrefix = '***';
|
||||||
static const _matchSuffix = '***';
|
static const _matchSuffix = '***';
|
||||||
|
|
||||||
final TextEditingController searchTextController;
|
final ValueListenable<TextEditingValue> searchTextNotifier;
|
||||||
|
|
||||||
const FeedSearch({required this.searchTextController});
|
const FeedSearch({required this.searchTextNotifier});
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context, WidgetRef ref) {
|
Widget build(BuildContext context, WidgetRef ref) {
|
||||||
@@ -30,11 +31,11 @@ class FeedSearch extends HookConsumerWidget {
|
|||||||
|
|
||||||
final articlesAsync = ref.watch(articleSearchProvider(null));
|
final articlesAsync = ref.watch(articleSearchProvider(null));
|
||||||
|
|
||||||
useListenableCallback(searchTextController, () async {
|
useListenableCallback(searchTextNotifier, () async {
|
||||||
await ref
|
await ref
|
||||||
.read(articleSearchProvider(null).notifier)
|
.read(articleSearchProvider(null).notifier)
|
||||||
.search(
|
.search(
|
||||||
searchTextController.text,
|
searchTextNotifier.value.text,
|
||||||
// ignore: avoid_redundant_argument_values dont break things
|
// ignore: avoid_redundant_argument_values dont break things
|
||||||
matchPrefix: _matchPrefix,
|
matchPrefix: _matchPrefix,
|
||||||
// ignore: avoid_redundant_argument_values dont break things
|
// ignore: avoid_redundant_argument_values dont break things
|
||||||
|
|||||||
+5
-4
@@ -1,3 +1,4 @@
|
|||||||
|
import 'package:flutter/foundation.dart';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||||
import 'package:go_router/go_router.dart';
|
import 'package:go_router/go_router.dart';
|
||||||
@@ -14,18 +15,18 @@ import 'package:skeletonizer/skeletonizer.dart';
|
|||||||
import 'package:sliver_tools/sliver_tools.dart';
|
import 'package:sliver_tools/sliver_tools.dart';
|
||||||
|
|
||||||
class HistorySuggestions extends HookConsumerWidget {
|
class HistorySuggestions extends HookConsumerWidget {
|
||||||
final TextEditingController searchTextController;
|
final ValueListenable<TextEditingValue> searchTextListenable;
|
||||||
|
|
||||||
const HistorySuggestions({super.key, required this.searchTextController});
|
const HistorySuggestions({super.key, required this.searchTextListenable});
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context, WidgetRef ref) {
|
Widget build(BuildContext context, WidgetRef ref) {
|
||||||
final historySuggestionsAsync = ref.watch(engineHistorySuggestionsProvider);
|
final historySuggestionsAsync = ref.watch(engineHistorySuggestionsProvider);
|
||||||
|
|
||||||
useListenableCallback(searchTextController, () async {
|
useListenableCallback(searchTextListenable, () async {
|
||||||
await ref
|
await ref
|
||||||
.watch(engineSuggestionsProvider.notifier)
|
.watch(engineSuggestionsProvider.notifier)
|
||||||
.addQuery(searchTextController.text);
|
.addQuery(searchTextListenable.value.text);
|
||||||
});
|
});
|
||||||
|
|
||||||
if (historySuggestionsAsync.hasValue &&
|
if (historySuggestionsAsync.hasValue &&
|
||||||
|
|||||||
+6
-5
@@ -1,3 +1,4 @@
|
|||||||
|
import 'package:flutter/foundation.dart';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||||
import 'package:flutter_markdown/flutter_markdown.dart';
|
import 'package:flutter_markdown/flutter_markdown.dart';
|
||||||
@@ -20,9 +21,9 @@ class TabSearch extends HookConsumerWidget {
|
|||||||
static const _matchPrefix = '***';
|
static const _matchPrefix = '***';
|
||||||
static const _matchSuffix = '***';
|
static const _matchSuffix = '***';
|
||||||
|
|
||||||
final TextEditingController searchTextController;
|
final ValueListenable<TextEditingValue> searchTextListenable;
|
||||||
|
|
||||||
const TabSearch({required this.searchTextController});
|
const TabSearch({required this.searchTextListenable});
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context, WidgetRef ref) {
|
Widget build(BuildContext context, WidgetRef ref) {
|
||||||
@@ -46,11 +47,11 @@ class TabSearch extends HookConsumerWidget {
|
|||||||
)
|
)
|
||||||
.value;
|
.value;
|
||||||
|
|
||||||
useListenableCallback(searchTextController, () async {
|
useListenableCallback(searchTextListenable, () async {
|
||||||
await ref
|
await ref
|
||||||
.read(tabSearchRepositoryProvider(TabSearchPartition.search).notifier)
|
.read(tabSearchRepositoryProvider(TabSearchPartition.search).notifier)
|
||||||
.addQuery(
|
.addQuery(
|
||||||
searchTextController.text,
|
searchTextListenable.value.text,
|
||||||
// ignore: avoid_redundant_argument_values dont break things
|
// ignore: avoid_redundant_argument_values dont break things
|
||||||
matchPrefix: _matchPrefix,
|
matchPrefix: _matchPrefix,
|
||||||
// ignore: avoid_redundant_argument_values dont break things
|
// ignore: avoid_redundant_argument_values dont break things
|
||||||
@@ -81,7 +82,7 @@ class TabSearch extends HookConsumerWidget {
|
|||||||
selectedContainer.value = null;
|
selectedContainer.value = null;
|
||||||
},
|
},
|
||||||
containerFilter: (container) => (container.tabCount ?? 0) > 0,
|
containerFilter: (container) => (container.tabCount ?? 0) > 0,
|
||||||
searchTextController: searchTextController,
|
searchTextListenable: searchTextListenable,
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import 'package:flutter/foundation.dart';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||||
@@ -20,22 +21,22 @@ class ContainerChips extends HookConsumerWidget {
|
|||||||
final void Function(ContainerDataWithCount)? onSelected;
|
final void Function(ContainerDataWithCount)? onSelected;
|
||||||
final void Function(ContainerDataWithCount)? onDeleted;
|
final void Function(ContainerDataWithCount)? onDeleted;
|
||||||
|
|
||||||
final TextEditingController? searchTextController;
|
final ValueListenable<TextEditingValue>? searchTextListenable;
|
||||||
|
|
||||||
const ContainerChips({
|
const ContainerChips({
|
||||||
required this.selectedContainer,
|
required this.selectedContainer,
|
||||||
required this.onSelected,
|
required this.onSelected,
|
||||||
required this.onDeleted,
|
required this.onDeleted,
|
||||||
this.containerFilter,
|
this.containerFilter,
|
||||||
this.searchTextController,
|
this.searchTextListenable,
|
||||||
this.displayMenu = true,
|
this.displayMenu = true,
|
||||||
});
|
});
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context, WidgetRef ref) {
|
Widget build(BuildContext context, WidgetRef ref) {
|
||||||
final searchText = useListenableSelector(
|
final searchText = useListenableSelector(
|
||||||
searchTextController,
|
searchTextListenable,
|
||||||
() => searchTextController?.text,
|
() => searchTextListenable?.value.text,
|
||||||
);
|
);
|
||||||
|
|
||||||
final containersAsync = ref.watch(
|
final containersAsync = ref.watch(
|
||||||
|
|||||||
@@ -0,0 +1,59 @@
|
|||||||
|
import 'package:flutter/widgets.dart';
|
||||||
|
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||||
|
import 'package:lensai/utils/sampled_value_notifier.dart';
|
||||||
|
|
||||||
|
/// A custom hook that creates a sampled ValueNotifier from another ValueNotifier
|
||||||
|
ValueNotifier<T> useSampledValueNotifier<T>({
|
||||||
|
required ValueNotifier<T> source,
|
||||||
|
required Duration sampleDuration,
|
||||||
|
}) {
|
||||||
|
return use(
|
||||||
|
_SampledValueNotifierHook<T>(
|
||||||
|
source: source,
|
||||||
|
sampleDuration: sampleDuration,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Hook implementation for sampled ValueNotifier
|
||||||
|
class _SampledValueNotifierHook<T> extends Hook<ValueNotifier<T>> {
|
||||||
|
final ValueNotifier<T> source;
|
||||||
|
final Duration sampleDuration;
|
||||||
|
|
||||||
|
const _SampledValueNotifierHook({
|
||||||
|
required this.source,
|
||||||
|
required this.sampleDuration,
|
||||||
|
});
|
||||||
|
|
||||||
|
@override
|
||||||
|
_SampledValueNotifierHookState<T> createState() =>
|
||||||
|
_SampledValueNotifierHookState<T>();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _SampledValueNotifierHookState<T>
|
||||||
|
extends HookState<ValueNotifier<T>, _SampledValueNotifierHook<T>> {
|
||||||
|
late SampledValueNotifier<T> _sampledNotifier;
|
||||||
|
|
||||||
|
@override
|
||||||
|
void initHook() {
|
||||||
|
super.initHook();
|
||||||
|
_sampledNotifier = SampledValueNotifier<T>(
|
||||||
|
source: hook.source,
|
||||||
|
sampleDuration: hook.sampleDuration,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
ValueNotifier<T> build(BuildContext context) {
|
||||||
|
return _sampledNotifier;
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
void dispose() {
|
||||||
|
_sampledNotifier.dispose();
|
||||||
|
super.dispose();
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
String get debugLabel => 'useSampledValueNotifier<$T>';
|
||||||
|
}
|
||||||
@@ -0,0 +1,75 @@
|
|||||||
|
import 'dart:async';
|
||||||
|
import 'package:flutter/foundation.dart';
|
||||||
|
|
||||||
|
/// A ValueNotifier that acts as a proxy for another ValueNotifier,
|
||||||
|
/// sampling its values based on a given duration.
|
||||||
|
class SampledValueNotifier<T> extends ValueNotifier<T> {
|
||||||
|
/// The source ValueNotifier to sample from
|
||||||
|
final ValueNotifier<T> _source;
|
||||||
|
|
||||||
|
/// The duration to sample at
|
||||||
|
final Duration _sampleDuration;
|
||||||
|
|
||||||
|
/// Timer for sampling
|
||||||
|
Timer? _timer;
|
||||||
|
|
||||||
|
/// Whether a value has changed since the last sample
|
||||||
|
bool _hasNewValue = false;
|
||||||
|
|
||||||
|
/// Subscription to the source ValueNotifier
|
||||||
|
late final VoidCallback _sourceListener;
|
||||||
|
|
||||||
|
/// Creates a SampledValueNotifier that samples values from [source]
|
||||||
|
/// at the specified [sampleDuration].
|
||||||
|
SampledValueNotifier({
|
||||||
|
required ValueNotifier<T> source,
|
||||||
|
required Duration sampleDuration,
|
||||||
|
}) : _source = source,
|
||||||
|
_sampleDuration = sampleDuration,
|
||||||
|
super(source.value) {
|
||||||
|
// Set up listener for source changes
|
||||||
|
_sourceListener = () {
|
||||||
|
_hasNewValue = true;
|
||||||
|
|
||||||
|
// Start timer if not already running
|
||||||
|
if (_timer == null || !_timer!.isActive) {
|
||||||
|
_startTimer();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
_source.addListener(_sourceListener);
|
||||||
|
_startTimer();
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Starts the sampling timer
|
||||||
|
void _startTimer() {
|
||||||
|
_timer?.cancel();
|
||||||
|
_timer = Timer.periodic(_sampleDuration, _onSampleTime);
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Called when it's time to sample
|
||||||
|
void _onSampleTime(Timer timer) {
|
||||||
|
if (_hasNewValue) {
|
||||||
|
value = _source.value;
|
||||||
|
_hasNewValue = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
void dispose() {
|
||||||
|
_timer?.cancel();
|
||||||
|
_source.removeListener(_sourceListener);
|
||||||
|
|
||||||
|
super.dispose();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
extension ValueNotifierSampleExtension<T> on ValueNotifier<T> {
|
||||||
|
/// Creates a new ValueNotifier that samples this ValueNotifier's values
|
||||||
|
/// at the specified [duration].
|
||||||
|
///
|
||||||
|
/// The returned ValueNotifier must be disposed when no longer needed.
|
||||||
|
ValueNotifier<T> sampleTime(Duration duration) {
|
||||||
|
return SampledValueNotifier<T>(source: this, sampleDuration: duration);
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user