chore: add loading page

AppFlowy-IO · Jun 3, 2024 · 4164113 · 4164113
1 parent ad0f8bc
commit 4164113
Show file tree

Hide file tree

Showing 13 changed files with 240 additions and 113 deletions.
diff --git a/frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_bloc.dart b/frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_bloc.dart
@@ -9,7 +9,7 @@ import 'package:fixnum/fixnum.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_chat_types/flutter_chat_types.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
-
+import 'package:nanoid/nanoid.dart';
 import 'chat_message_listener.dart';
 
 part 'chat_bloc.freezed.dart';
@@ -146,11 +146,7 @@ class ChatBloc extends Bloc<ChatEvent, ChatState> {
             );
           },
           streaming: (List<Message> messages) {
-            // filter out loading or error messages
-            final allMessages = state.messages.where((element) {
-              return !(element.metadata?.containsKey(onetimeMessageType) ==
-                  true);
-            }).toList();
+            final allMessages = _perminentMessages();
             allMessages.insertAll(0, messages);
             emit(state.copyWith(messages: allMessages));
           },
@@ -196,11 +192,7 @@ class ChatBloc extends Bloc<ChatEvent, ChatState> {
             });
           },
           didReceiveRelatedQuestion: (List<RelatedQuestionPB> questions) {
-            final allMessages = state.messages.where((element) {
-              return !(element.metadata?.containsKey(onetimeMessageType) ==
-                  true);
-            }).toList();
-
+            final allMessages = _perminentMessages();
             final message = CustomMessage(
               metadata: OnetimeMessageType.relatedQuestion.toMap(),
               author: const User(id: "system"),
@@ -233,6 +225,15 @@ class ChatBloc extends Bloc<ChatEvent, ChatState> {
     );
   }
 
+// Returns the list of messages that are not include one-time messages.
+  List<Message> _perminentMessages() {
+    final allMessages = state.messages.where((element) {
+      return !(element.metadata?.containsKey(onetimeMessageType) == true);
+    }).toList();
+
+    return allMessages;
+  }
+
   void _loadPrevMessage(Int64? beforeMessageId) {
     final payload = LoadPrevChatMessagePB(
       chatId: state.view.id,
@@ -269,7 +270,7 @@ class ChatBloc extends Bloc<ChatEvent, ChatState> {
       author: User(id: id),
       metadata: OnetimeMessageType.loading.toMap(),
       // fake id
-      id: 'chat_message_loading_id',
+      id: nanoid(),
     );
   }
 

diff --git a/frontend/appflowy_flutter/lib/plugins/ai_chat/chat_page.dart b/frontend/appflowy_flutter/lib/plugins/ai_chat/chat_page.dart
@@ -19,6 +19,7 @@ import 'package:flutter_chat_ui/flutter_chat_ui.dart' show Chat;
 import 'package:flutter_chat_types/flutter_chat_types.dart' as types;
 
 import 'presentation/chat_input.dart';
+import 'presentation/chat_loading.dart';
 import 'presentation/chat_popmenu.dart';
 import 'presentation/chat_theme.dart';
 import 'presentation/chat_welcome_page.dart';
@@ -233,15 +234,7 @@ class _AIChatPageState extends State<AIChatPage> {
 
     switch (messageType) {
       case OnetimeMessageType.loading:
-        return SizedBox(
-          width: 50,
-          height: 30,
-          child: CircularProgressIndicator.adaptive(
-            valueColor: AlwaysStoppedAnimation<Color?>(
-              Theme.of(context).colorScheme.primary,
-            ),
-          ),
-        );
+        return const ChatAILoading();
       default:
         return const SizedBox.shrink();
     }

diff --git a/frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_loading.dart b/frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_loading.dart
@@ -0,0 +1,69 @@
+import 'package:flowy_infra/theme_extension.dart';
+import 'package:flowy_infra_ui/widget/spacing.dart';
+import 'package:flutter/material.dart';
+import 'package:shimmer/shimmer.dart';
+
+class ChatAILoading extends StatelessWidget {
+  const ChatAILoading({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Shimmer.fromColors(
+      baseColor: AFThemeExtension.of(context).lightGreyHover,
+      highlightColor:
+          AFThemeExtension.of(context).lightGreyHover.withOpacity(0.5),
+      period: const Duration(seconds: 3),
+      child: const ContentPlaceholder(),
+    );
+  }
+}
+
+class ContentPlaceholder extends StatelessWidget {
+  const ContentPlaceholder({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 16.0),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Container(
+                width: 30,
+                height: 16.0,
+                margin: const EdgeInsets.only(bottom: 8.0),
+                decoration: BoxDecoration(
+                  color: AFThemeExtension.of(context).lightGreyHover,
+                  borderRadius: BorderRadius.circular(4.0),
+                ),
+              ),
+              const HSpace(10),
+              Container(
+                width: 100,
+                height: 16.0,
+                margin: const EdgeInsets.only(bottom: 8.0),
+                decoration: BoxDecoration(
+                  color: AFThemeExtension.of(context).lightGreyHover,
+                  borderRadius: BorderRadius.circular(4.0),
+                ),
+              ),
+            ],
+          ),
+          Container(
+            width: 140,
+            height: 16.0,
+            margin: const EdgeInsets.only(bottom: 8.0),
+            decoration: BoxDecoration(
+              color: AFThemeExtension.of(context).lightGreyHover,
+              borderRadius: BorderRadius.circular(4.0),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/frontend/appflowy_flutter/pubspec.lock b/frontend/appflowy_flutter/pubspec.lock
@@ -1850,6 +1850,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.4"
+  shimmer:
+    dependency: "direct main"
+    description:
+      name: shimmer
+      sha256: "5f88c883a22e9f9f299e5ba0e4f7e6054857224976a5d9f839d4ebdc94a14ac9"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.0"
   simple_gesture_detector:
     dependency: transitive
     description:

diff --git a/frontend/appflowy_flutter/pubspec.yaml b/frontend/appflowy_flutter/pubspec.yaml
@@ -140,6 +140,7 @@ dependencies:
   scaled_app: ^2.3.0
   auto_size_text_field: ^2.2.3
   reorderable_tabbar: ^1.0.6
+  shimmer: ^3.0.0
 
 dev_dependencies:
   flutter_lints: ^3.0.1