feat(): ability to use fallbackUrl as placeholder instead of spinner (#36)

* added ability to use fallbackUrl as placeholder instead of spinner

* added ability to use fallbackUrl as placeholder instead of spinner, fix

* code style

Author: lucho2d7

src/components/img-loader.ts

@@ -4,7 +4,7 @@ import { ImageLoaderConfig } from '../providers/image-loader-config';
 
 @Component({
   selector: 'img-loader',
-  template: '<ion-spinner *ngIf="spinner && isLoading"></ion-spinner>',
+  template: '<ion-spinner *ngIf="spinner && isLoading && !fallbackAsPlaceholder"></ion-spinner>',
   styles: ['ion-spinner { float: none; margin-left: auto; margin-right: auto; display: block; }']
 })
 export class ImgLoader implements OnInit {
@@ -34,6 +34,11 @@ export class ImgLoader implements OnInit {
    */
   @Input() spinner: boolean = this._config.spinnerEnabled;
 
+  /**
+   * Whether to show the fallback image instead of a spinner while the image loads
+   */
+  @Input() fallbackAsPlaceholder: boolean = this._config.fallbackAsPlaceholder;
+
   /**
    * Use <img> tag
    */
@@ -106,12 +111,17 @@ export class ImgLoader implements OnInit {
   ) { }
 
   ngOnInit(): void {
+    if(this.fallbackAsPlaceholder && this.fallbackUrl) {
+      this.setImage(this.fallbackUrl, false);
+    }
+
     if (!this.src) {
       // image url was not passed
       // this can happen when [src] is set to a variable that turned out to be undefined
       // one example could be a list of users with their profile pictures
       // in this case, it would be useful to use the fallback image instead
-      if (this.fallbackUrl) {
+      // if fallbackUrl was used as placeholder we do not need to set it again
+      if (!this.fallbackAsPlaceholder && this.fallbackUrl) {
         // we're not going to cache the fallback image since it should be locally saved
         this.setImage(this.fallbackUrl);
       } else {
@@ -153,8 +163,8 @@ export class ImgLoader implements OnInit {
    * Set the image to be displayed
    * @param imageUrl
    */
-  private setImage(imageUrl: string): void {
-    this.isLoading = false;
+  private setImage(imageUrl: string, stopLoading: boolean = true): void {
+    this.isLoading = !stopLoading;
 
     if (this._useImg) {
 

src/providers/image-loader-config.ts

@@ -7,6 +7,8 @@ export class ImageLoaderConfig {
 
   spinnerEnabled: boolean = true;
 
+  fallbackAsPlaceholder: boolean = false;
+
   backgroundSize: string = 'contain';
 
   backgroundRepeat: string = 'no-repeat';
@@ -55,6 +57,14 @@ export class ImageLoaderConfig {
     this.spinnerEnabled = enable;
   }
 
+  /**
+   * Enable/Disable the fallback image as placeholder instead of the spinner. Defaults to false.
+   * @param enable {boolean} set to true to enable
+   */
+  enableFallbackAsPlaceholder(enable: boolean): void {
+    this.fallbackAsPlaceholder = enable;
+  }
+
   /**
    * Sets the cache directory name. Defaults to 'image-loader-cache'
    * @param name {string} name of directory