fix: spotify friends and user profile icon (mobile) showing when not authenticated #1410

.vscode/settings.json

@@ -24,5 +24,6 @@
   "explorer.fileNesting.patterns": {
     "pubspec.yaml": "pubspec.lock,analysis_options.yaml,.packages,.flutter-plugins,.flutter-plugins-dependencies,flutter_launcher_icons*.yaml,flutter_native_splash*.yaml",
     "README.md": "LICENSE,CODE_OF_CONDUCT.md,CONTRIBUTING.md,SECURITY.md,CONTRIBUTION.md,CHANGELOG.md,PRIVACY_POLICY.md",
+    "*.dart": "${capture}.g.dart,${capture}.freezed.dart",
   }
 }

lib/components/home/sections/friends.dart

@@ -1,12 +1,14 @@
 import 'dart:ui';
 
 import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:skeletonizer/skeletonizer.dart';
 import 'package:spotube/collections/fake.dart';
 import 'package:spotube/components/home/sections/friends/friend_item.dart';
 import 'package:spotube/hooks/utils/use_breakpoint_value.dart';
 import 'package:spotube/models/spotify_friends.dart';
+import 'package:spotube/provider/authentication_provider.dart';
 import 'package:spotube/provider/spotify/spotify.dart';
 
 class HomePageFriendsSection extends HookConsumerWidget {
@@ -14,6 +16,7 @@ class HomePageFriendsSection extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, ref) {
+    final auth = ref.watch(authenticationProvider);
     final friendsQuery = ref.watch(friendsProvider);
     final friends =
         friendsQuery.asData?.value.friends ?? FakeData.friends.friends;
@@ -27,32 +30,36 @@ class HomePageFriendsSection extends HookConsumerWidget {
       xxl: 7,
     );
 
-    final friendGroup = friends.fold<List<List<SpotifyFriendActivity>>>(
+    final friendGroup = useMemoized(
-      [],
+      () => friends.fold<List<List<SpotifyFriendActivity>>>(
-      (previousValue, element) {
+        [],
-        if (previousValue.isEmpty) {
+        (previousValue, element) {
+          if (previousValue.isEmpty) {
+            return [
+              [element]
+            ];
+          }
+
+          final lastGroup = previousValue.last;
+          if (lastGroup.length < groupCount) {
+            return [
+              ...previousValue.sublist(0, previousValue.length - 1),
+              [...lastGroup, element]
+            ];
+          }
+
           return [
+            ...previousValue,
             [element]
           ];
-        }
+        },
-
+      ),
-        final lastGroup = previousValue.last;
+      [friends, groupCount],
-        if (lastGroup.length < groupCount) {
-          return [
-            ...previousValue.sublist(0, previousValue.length - 1),
-            [...lastGroup, element]
-          ];
-        }
-
-        return [
-          ...previousValue,
-          [element]
-        ];
-      },
     );
 
     if (friendsQuery.isLoading ||
-        friendsQuery.asData?.value.friends.isEmpty == true) {
+        friendsQuery.asData?.value.friends.isEmpty == true ||
+        auth == null) {
       return const SliverToBoxAdapter(
         child: SizedBox.shrink(),
       );

lib/pages/home/home.dart

@@ -14,6 +14,7 @@ import 'package:spotube/components/shared/image/universal_image.dart';
 import 'package:spotube/components/shared/page_window_title_bar.dart';
 import 'package:spotube/extensions/constrains.dart';
 import 'package:spotube/extensions/image.dart';
+import 'package:spotube/provider/authentication_provider.dart';
 import 'package:spotube/provider/spotify/spotify.dart';
 import 'package:spotube/utils/platform.dart';
 import 'package:spotube/utils/service_utils.dart';
@@ -41,9 +42,14 @@ class HomePage extends HookConsumerWidget {
                     const ConnectDeviceButton(),
                     const Gap(10),
                     Consumer(builder: (context, ref, _) {
+                      final auth = ref.watch(authenticationProvider);
                       final me = ref.watch(meProvider);
                       final meData = me.asData?.value;
 
+                      if (auth == null) {
+                        return const SizedBox();
+                      }
+
                       return IconButton(
                         icon: CircleAvatar(
                           backgroundImage: UniversalImage.imageProvider(