Skip to content

Commit

Permalink
chore: chirp empty loading state
Browse files Browse the repository at this point in the history
  • Loading branch information
IamMuuo committed Aug 27, 2024
1 parent 560d46c commit 9eae7e9
Show file tree
Hide file tree
Showing 6 changed files with 221 additions and 97 deletions.
8 changes: 5 additions & 3 deletions lib/tools/chirp/controllers/chirp_controller.dart
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ class ChirpController extends GetxController {
UserController userController = Get.find<UserController>();
RxList<Post> posts = RxList<Post>();
RxInt currentPage = 0.obs;
RxBool isLoading = false.obs;
RxBool feedLoading = false.obs;
RxBool myPostsLoading = false.obs;
RxBool upvotedPostsLoading = false.obs;

@override
void onInit() {
Expand All @@ -19,7 +21,7 @@ class ChirpController extends GetxController {
bool nextPage = false,
previousPage = false,
}) async {
isLoading.value = true;
feedLoading.value = true;

int page = 1;

Expand All @@ -30,7 +32,7 @@ class ChirpController extends GetxController {
}
final result =
await _service.fetchPosts(userController.authHeaders, page: page);
isLoading.value = false;
feedLoading.value = false;

return result.fold((l) {
return left(l);
Expand Down
155 changes: 61 additions & 94 deletions lib/tools/chirp/pages/chirp_home_page.dart
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import 'package:academia/exports/barrel.dart';
import '../pages/post_create_page.dart';
import 'package:get/get.dart';
import 'package:lottie/lottie.dart';
import '../widgets/widgets.dart';
import './feed_page.dart';
import '../controllers/chirp_controller.dart';

class ChirpHomePage extends StatefulWidget {
Expand All @@ -29,109 +29,76 @@ class _ChirpHomePageState extends State<ChirpHomePage> {
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Theme.of(context).colorScheme.surfaceDim,
body: CustomScrollView(
slivers: [
SliverAppBar(
leading: IconButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => const LeaderBoardPage()));
},
icon: const Icon(Ionicons.trophy_outline),
),
actions: [
IconButton(
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => const PostCreatePage(),
),
);
},
icon: const Icon(Ionicons.add),
),
IconButton(
body: DefaultTabController(
length: 3,
child: CustomScrollView(
slivers: [
SliverAppBar(
title: const Text("Chirp"),
leading: IconButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => const EventsPage()));
builder: (context) => const LeaderBoardPage()));
},
icon: const Icon(Ionicons.flame_outline),
icon: const Icon(Ionicons.trophy_outline),
),
],
expandedHeight: 300,
flexibleSpace: FlexibleSpaceBar(
background: Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(
"assets/images/sketchbook-passersby-people-working-around-1.png"),
actions: [
IconButton(
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => const PostCreatePage(),
),
);
},
icon: const Icon(Ionicons.add),
),
IconButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => const EventsPage()));
},
icon: const Icon(Ionicons.flame_outline),
),
],
expandedHeight: 300,
flexibleSpace: FlexibleSpaceBar(
background: Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(
"assets/images/sketchbook-passersby-people-working-around-1.png"),
),
),
),
),
title: const Text("Chirp"),
),
pinned: true,
floating: true,
snap: true,
),
SliverVisibility(
visible: false,
sliver: SliverPersistentHeader(
pinned: true,
floating: true,
delegate: PersistentStorySliverDelegate(child: const SizedBox()),
snap: true,
bottom: const TabBar(
tabs: [
Tab(text: 'Feed'),
Tab(text: "My Posts"),
Tab(text: "Upvoted"),
],
),
),
),
SliverFillRemaining(
child: Obx(
() => controller.isLoading.value
? SingleChildScrollView(
child: Column(
children: [
Lottie.asset("assets/lotties/fetching.json"),
const SizedBox(height: 22),
Text(
"Fetching posts",
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.headlineSmall,
),
],
),
)
: RefreshIndicator(
onRefresh: () async {
await controller.fetchPosts();
},
child: controller.posts.isEmpty
? SingleChildScrollView(
child: Column(
children: [
Lottie.asset("assets/lotties/empty.json"),
Text(
"Argh snap! We couldn't find posts at the moment. Please try again later",
textAlign: TextAlign.center,
style: Theme.of(context)
.textTheme
.headlineSmall,
),
],
),
)
: ListView.separated(
itemBuilder: (context, index) {
final data = controller.posts[index];
return PostCard(post: data);
},
separatorBuilder: (context, index) =>
const SizedBox(
height: 8,
child: Divider(thickness: 0.3),
),
itemCount: controller.posts.length,
),
),
SliverVisibility(
visible: false,
sliver: SliverPersistentHeader(
floating: true,
delegate:
PersistentStorySliverDelegate(child: const SizedBox()),
),
),
),
],
SliverFillRemaining(
child: TabBarView(children: [
FeedPage(),
Text("Holla"),
Text("Moma"),
])),
],
),
),
);
}
Expand Down
79 changes: 79 additions & 0 deletions lib/tools/chirp/pages/feed_page.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:lottie/lottie.dart';
import '../widgets/widgets.dart';
import '../controllers/chirp_controller.dart';

class FeedPage extends StatefulWidget {
const FeedPage({super.key});

@override
State<FeedPage> createState() => _FeedPageState();
}

class _FeedPageState extends State<FeedPage> {
final ChirpController controller = Get.find<ChirpController>();
@override
Widget build(BuildContext context) {
return RefreshIndicator(
child: Obx(
() => controller.feedLoading.value || true
? ListView.builder(
itemBuilder: (context, index) => EmptyPostCard(),
)
: Text("Loaded"),
),
onRefresh: () async {
Future.delayed(Duration(seconds: 5));
});
}
}
// Obx(
// () => controller.isLoading.value
// ? SingleChildScrollView(
// child: Column(
// children: [
// Lottie.asset("assets/lotties/fetching.json"),
// const SizedBox(height: 22),
// Text(
// "Fetching posts",
// textAlign: TextAlign.center,
// style: Theme.of(context).textTheme.headlineSmall,
// ),
// ],
// ),
// )
// : RefreshIndicator(
// onRefresh: () async {
// await controller.fetchPosts();
// },
// child: controller.posts.isEmpty
// ? SingleChildScrollView(
// child: Column(
// children: [
// Lottie.asset("assets/lotties/empty.json"),
// Text(
// "Argh snap! We couldn't find posts at the moment. Please try again later",
// textAlign: TextAlign.center,
// style: Theme.of(context)
// .textTheme
// .headlineSmall,
// ),
// ],
// ),
// )
// : ListView.separated(
// itemBuilder: (context, index) {
// final data = controller.posts[index];
// return PostCard(post: data);
// },
// separatorBuilder: (context, index) =>
// const SizedBox(
// height: 8,
// child: Divider(thickness: 0.3),
// ),
// itemCount: controller.posts.length,
// ),
// ),
// ),
//
74 changes: 74 additions & 0 deletions lib/tools/chirp/widgets/empty_post_card.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import 'package:academia/exports/barrel.dart';
import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';

class EmptyPostCard extends StatelessWidget {
const EmptyPostCard({super.key});

@override
Widget build(BuildContext context) {
return Shimmer.fromColors(
baseColor: Colors.grey[300]!,
highlightColor: Colors.white,
child: Container(
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.symmetric(
horizontal: 10,
vertical: 8,
),
child: Column(
children: [
Row(
children: [
const CircleAvatar(
radius: 20,
),
const SizedBox(width: 4),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
color: Theme.of(context).colorScheme.primaryContainer,
height: 10,
width: 60,
),
const SizedBox(height: 2),
Container(
color: Theme.of(context).colorScheme.primaryContainer,
height: 10,
width: 120,
),
],
),
const Spacer(),
const CircleAvatar(radius: 10)
],
),
const SizedBox(height: 4),
Container(
color: Theme.of(context).colorScheme.primaryContainer,
height: 60,
width: double.infinity,
),
const SizedBox(height: 4),
Row(
children: [
Container(
color: Theme.of(context).colorScheme.primaryContainer,
height: 20,
width: 60,
),
const Spacer(),
Container(
color: Theme.of(context).colorScheme.primaryContainer,
height: 20,
width: 60,
),
],
),
],
),
),
);
}
}
1 change: 1 addition & 0 deletions lib/tools/chirp/widgets/widgets.dart
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export 'story_header.dart';
export 'post_card.dart';
export 'comment_widget.dart';
export 'empty_post_card.dart';
1 change: 1 addition & 0 deletions pubspec.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ dependencies:
timeago: ^3.7.0
swipe_to: ^1.0.6
change_app_package_name: ^1.3.0
shimmer: ^3.0.0



Expand Down

0 comments on commit 9eae7e9

Please sign in to comment.