cotugno/immich
2
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-11-15 18:08:48 -07:00
Code Issues Packages Projects Releases 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

40
mobile/lib/shared/ui/immich_image.dart
View File

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