admin/marco.pms.mobileapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement expense by status skeleton loader for improved loading experience

Browse Source
This commit is contained in:
Vaibhav Surve 2025-10-31 16:05:43 +05:30
parent 8dbd21df8b
commit 1e39210a29
3 changed files with 138 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
lib/helpers/widgets/dashbaord/expense_by_status_widget.dart
View File

@ -3,6 +3,7 @@ import 'package:get/get.dart';
import 'package:marco/controller/dashboard/dashboard_controller.dart'; import 'package:marco/controller/dashboard/dashboard_controller.dart';
import 'package:marco/helpers/widgets/my_text.dart'; import 'package:marco/helpers/widgets/my_text.dart';
import 'package:marco/helpers/utils/utils.dart'; import 'package:marco/helpers/utils/utils.dart';
import 'package:marco/helpers/widgets/my_custom_skeleton.dart';
class ExpenseByStatusWidget extends StatelessWidget { class ExpenseByStatusWidget extends StatelessWidget {
final DashboardController controller; final DashboardController controller;
@ -49,7 +50,7 @@ class ExpenseByStatusWidget extends StatelessWidget {
final data = controller.pendingExpensesData.value; final data = controller.pendingExpensesData.value;
if (controller.isPendingExpensesLoading.value) { if (controller.isPendingExpensesLoading.value) {
return const Center(child: CircularProgressIndicator()); return SkeletonLoaders.expenseByStatusSkeletonLoader();
} }
if (data == null) { if (data == null) {

135
lib/helpers/widgets/my_custom_skeleton.dart
View File

@ -45,6 +45,141 @@ class SkeletonLoaders {
); );
} }
// Expense By Status Skeleton Loader
static Widget expenseByStatusSkeletonLoader() {
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.05),
blurRadius: 6,
spreadRadius: 1,
offset: const Offset(0, 2),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Title
Container(
height: 16,
width: 160,
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.circular(6),
),
),
const SizedBox(height: 16),
// 4 Status Rows
...List.generate(4, (index) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 6),
child: Row(
children: [
// Icon placeholder
Container(
height: 44,
width: 44,
decoration: BoxDecoration(
color: Colors.grey.shade300,
shape: BoxShape.circle,
),
),
const SizedBox(width: 12),
// Title + Amount
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 12,
width: 100,
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.circular(4),
),
),
const SizedBox(height: 6),
Container(
height: 12,
width: 60,
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.circular(4),
),
),
],
),
),
// Count + arrow placeholder
Container(
height: 12,
width: 30,
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.circular(4),
),
),
const SizedBox(width: 6),
Icon(Icons.chevron_right,
color: Colors.grey.shade300, size: 24),
],
),
);
}),
const SizedBox(height: 16),
Divider(color: Colors.grey.shade300),
const SizedBox(height: 12),
// Bottom Row (Project Spendings)
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 12,
width: 120,
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.circular(4),
),
),
const SizedBox(height: 4),
Container(
height: 10,
width: 140,
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.circular(4),
),
),
],
),
Container(
height: 16,
width: 80,
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.circular(4),
),
),
],
),
],
),
);
}
// Chart Skeleton Loader // Chart Skeleton Loader
static Widget chartSkeletonLoader() { static Widget chartSkeletonLoader() {
return MyCard.bordered( return MyCard.bordered(