Skip to content

Commit

Permalink
Add LoadingIndicator for Async Operations
Browse files Browse the repository at this point in the history
Implemented a new LoadingIndicator widget that displays a pulsating gradient line, giving users visual feedback during asynchronous operations such as API calls. The indicator animates a gradient from white to AppColors.primaryLight and back to the grey background color, signifying the loading state.
  • Loading branch information
hunteraraujo committed Sep 28, 2023
1 parent 61653d1 commit a438619
Showing 1 changed file with 81 additions and 0 deletions.
81 changes: 81 additions & 0 deletions frontend/lib/views/chat/loading_indicator.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import 'package:auto_gpt_flutter_client/constants/app_colors.dart';
import 'package:flutter/material.dart';

class LoadingIndicator extends StatefulWidget {
final bool isLoading;

const LoadingIndicator({Key? key, required this.isLoading}) : super(key: key);

@override
_LoadingIndicatorState createState() => _LoadingIndicatorState();
}

class _LoadingIndicatorState extends State<LoadingIndicator>
with SingleTickerProviderStateMixin {
late AnimationController _controller;

@override
void initState() {
super.initState();

_controller = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
)..repeat();
}

@override
void dispose() {
_controller.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
double width =
(constraints.maxWidth >= 1000) ? 850 : constraints.maxWidth - 65;

return SizedBox(
width: width,
height: 4.0,
child: widget.isLoading
? AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return ShaderMask(
shaderCallback: (rect) {
return LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.grey[400]!,
AppColors.primaryLight,
Colors.white,
Colors.grey[400]!,
],
stops: [
_controller.value - 0.5,
_controller.value - 0.25,
_controller.value,
_controller.value + 0.25,
],
).createShader(rect);
},
child: Container(
width: width,
height: 4.0,
color: Colors.white,
),
);
},
)
: Container(
color: Colors.grey[400],
),
);
},
);
}
}

0 comments on commit a438619

Please sign in to comment.