beenull/immich
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix(mobile): Uses gray box placeholder for loading images by default and fixes odd spinner (#3364)

Browse source 
* image loading

* Use gray box placeholder by default and fix odd spinner with normal spinner

* Progress indicator is separate

* Fixes loading for cached network image too

---------

Co-authored-by: Alex Tran <Alex.Tran@conductix.com>
This commit is contained in:
martyfuhry 2023-07-22 11:03:31 -04:00 committed by GitHub
parent c0bee2a6b7
commit 7b25c9d0a7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 36 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
mobile/lib/shared/ui/immich_image.dart
View file

@ -16,11 +16,13 @@ class ImmichImage extends StatelessWidget {
this.height,
this.fit = BoxFit.cover,
this.useGrayBoxPlaceholder = false,
this.useProgressIndicator = false,
this.type = api.ThumbnailFormat.WEBP,
super.key,
});
final Asset? asset;
final bool useGrayBoxPlaceholder;
final bool useProgressIndicator;
final double? width;
final double? height;
final BoxFit fit;
@ -58,17 +60,23 @@ class ImmichImage extends StatelessWidget {
if (wasSynchronouslyLoaded || frame != null) {
return child;
}
return (useGrayBoxPlaceholder
? const SizedBox.square(
// Show loading if desired
return Stack(
children: [
if (useGrayBoxPlaceholder)
const SizedBox.square(
dimension: 250,
child: DecoratedBox(
decoration: BoxDecoration(color: Colors.grey),
),
)
: Transform.scale(
scale: 0.2,
child: const CircularProgressIndicator(),
));
),
if (useProgressIndicator)
const Center(
child: CircularProgressIndicator(),
),
],
);
},
errorBuilder: (context, error, stackTrace) {
if (error is PlatformException &&
@ -102,19 +110,27 @@ class ImmichImage extends StatelessWidget {
fit: fit,
fadeInDuration: const Duration(milliseconds: 250),
progressIndicatorBuilder: (context, url, downloadProgress) {
if (useGrayBoxPlaceholder) {
return const DecoratedBox(
decoration: BoxDecoration(color: Colors.grey),
);
}
return Transform.scale(
scale: 2,
child: Center(
child: CircularProgressIndicator.adaptive(
strokeWidth: 1,
value: downloadProgress.progress,
),
),
// Show loading if desired
return Stack(
children: [
if (useGrayBoxPlaceholder)
const SizedBox.square(
dimension: 250,
child: DecoratedBox(
decoration: BoxDecoration(color: Colors.grey),
),
),
if (useProgressIndicator)
Transform.scale(
scale: 2,
child: Center(
child: CircularProgressIndicator.adaptive(
strokeWidth: 1,
value: downloadProgress.progress,
),
),
),
],
);
},
errorWidget: (context, url, error) {