improve performance & ui

lib/components/comic.dart

@@ -43,7 +43,7 @@ class ComicTile extends StatelessWidget {
     var renderBox = context.findRenderObject() as RenderBox;
     var size = renderBox.size;
     var location = renderBox.localToGlobal(
-      Offset(size.width / 2, size.height / 2),
+      Offset((size.width - 242) / 2, size.height / 2),
     );
     showMenu(location, context);
   }

lib/components/loading.dart

@@ -96,6 +96,20 @@ class ListLoadingIndicator extends StatelessWidget {
   }
 }
 
+class SliverListLoadingIndicator extends StatelessWidget {
+  const SliverListLoadingIndicator({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    // SliverToBoxAdapter can not been lazy loaded.
+    // Use SliverList to make sure the animation can be lazy loaded.
+    return SliverList.list(children: const [
+      SizedBox(),
+      ListLoadingIndicator(),
+    ]);
+  }
+}
+
 abstract class LoadingState<T extends StatefulWidget, S extends Object>
     extends State<T> {
   bool isLoading = false;
@@ -299,9 +313,7 @@ abstract class MultiPageLoadingState<T extends StatefulWidget, S extends Object>
 
   Widget buildLoading(BuildContext context) {
     return Center(
-      child: const CircularProgressIndicator(
+      child: const CircularProgressIndicator().fixWidth(32).fixHeight(32),
-        strokeWidth: 2,
-      ).fixWidth(32).fixHeight(32),
     );
   }
 

lib/components/menu.dart

@@ -42,6 +42,9 @@ class _MenuRoute<T> extends PopupRoute<T> {
           child: Container(
             decoration: BoxDecoration(
               borderRadius: BorderRadius.circular(4),
+              border: context.brightness == Brightness.dark
+                  ? Border.all(color: context.colorScheme.outlineVariant)
+                  : null,
               boxShadow: [
                 BoxShadow(
                   color: context.colorScheme.shadow.withOpacity(0.2),
@@ -51,10 +54,10 @@ class _MenuRoute<T> extends PopupRoute<T> {
               ],
             ),
             child: BlurEffect(
-              borderRadius: BorderRadius.circular(8),
+              borderRadius: BorderRadius.circular(4),
               child: Material(
-                color: context.colorScheme.surface.withOpacity(0.82),
+                color: context.colorScheme.surface.withOpacity(0.78),
-                borderRadius: BorderRadius.circular(8),
+                borderRadius: BorderRadius.circular(4),
                 child: Container(
                   width: width,
                   padding:

lib/pages/comic_page.dart

@@ -223,7 +223,8 @@ class _ComicPageState extends LoadingState<ComicPage, ComicDetails>
             children: [
               SelectableText(comic.title, style: ts.s18),
               if (comic.subTitle != null)
-                SelectableText(comic.subTitle!, style: ts.s14).paddingVertical(4),
+                SelectableText(comic.subTitle!, style: ts.s14)
+                    .paddingVertical(4),
               Text(
                 (ComicSource.find(comic.sourceKey)?.name) ?? '',
                 style: ts.s12,
@@ -1115,14 +1116,12 @@ class _ComicChaptersState extends State<_ComicChapters> {
                 (state.history?.readEpisode ?? const {}).contains(i + 1);
             return Padding(
               padding: const EdgeInsets.fromLTRB(8, 4, 8, 4),
-              child: InkWell(
-                borderRadius: const BorderRadius.all(Radius.circular(16)),
               child: Material(
-                  elevation: 5,
+                color: context.colorScheme.surfaceContainer,
-                  color: context.colorScheme.surface,
+                borderRadius: const BorderRadius.all(Radius.circular(12)),
-                  surfaceTintColor: context.colorScheme.surfaceTint,
+                child: InkWell(
+                  onTap: () => state.read(i + 1),
                   borderRadius: const BorderRadius.all(Radius.circular(12)),
-                  shadowColor: Colors.transparent,
                   child: Padding(
                     padding:
                         const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
@@ -1133,19 +1132,18 @@ class _ComicChaptersState extends State<_ComicChapters> {
                         textAlign: TextAlign.center,
                         overflow: TextOverflow.ellipsis,
                         style: TextStyle(
-                            color:
+                          color: visited ? context.colorScheme.outline : null,
-                                visited ? context.colorScheme.outline : null),
+                        ),
                       ),
                     ),
                   ),
                 ),
-                onTap: () => state.read(i + 1),
               ),
             );
           }),
           gridDelegate: const SliverGridDelegateWithFixedHeight(
               maxCrossAxisExtent: 200, itemHeight: 48),
-        ),
+        ).sliverPadding(const EdgeInsets.symmetric(horizontal: 8)),
         if (eps.length > 20 && !showAll)
           SliverToBoxAdapter(
             child: Align(
@@ -1328,9 +1326,7 @@ class _ComicThumbnailsState extends State<_ComicThumbnails> {
             ),
           )
         else if (isLoading)
-          const SliverToBoxAdapter(
+          const SliverListLoadingIndicator(),
-            child: ListLoadingIndicator(),
-          ),
         const SliverToBoxAdapter(
           child: Divider(),
         ),

lib/pages/explore_page.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:sliver_tools/sliver_tools.dart';
 import 'package:venera/components/components.dart';
 import 'package:venera/foundation/app.dart';
 import 'package:venera/foundation/appdata.dart';
@@ -110,7 +111,9 @@ class _ExplorePageState extends State<ExplorePage>
     return Tab(text: i.ts(comicSource.key), key: Key(i));
   }
 
-  Widget buildBody(String i) => _SingleExplorePage(i, key: PageStorageKey(i));
+  Widget buildBody(String i) => Material(
+        child: _SingleExplorePage(i, key: PageStorageKey(i)),
+      );
 
   Widget buildEmpty() {
     var msg = "No Explore Pages".tl;
@@ -401,7 +404,7 @@ class _MixedExplorePageState
       controller: widget.controller,
       slivers: [
         ...buildSlivers(context, data),
-        if (haveNextPage) const ListLoadingIndicator().toSliver()
+        const SliverListLoadingIndicator(),
       ],
     );
   }