#47 PDF creation delay UX improvements with integration of call-to-ac…

…tion buttons

src/app/components/calculate/calculate.component.ts

@@ -20,7 +20,7 @@ export class CalculateComponent implements OnInit {
   private readonly MOBILE_DEVICE_CONTROL_HEIGHT = 674;
   private readonly MOBILE_DEVICE_CONTROL_WIDTH = 599;
   private readonly TIME_IN_MS_TO_REDRAW = 5e2;
-  private readonly TIME_IN_MS_TO_EXPORT = 5e3;
+  private readonly TIME_IN_MS_TO_EXPORT = 1e4;
 
   @HostListener('window:resize', ['$event'])
   onResize(event: any) {
@@ -75,6 +75,10 @@ export class CalculateComponent implements OnInit {
   captureScreen() {
     this.isLoading = true;
 
+    this.animate('#bmc-wbtn', 'animate');
+    this.animate('#at4-share', 'animate');
+    this.animate('.at-expanding-share-button-toggle-bg', 'animate');
+
     const calculatedListItemElements = document.querySelectorAll('mat-list-item article:last-child span') as NodeList;
     const calculatedResultItemElements = document.querySelectorAll('.total-expense-amount') as NodeList;
     const mortgageAmount = document.querySelector('.mortgage-amount') as HTMLInputElement;
@@ -90,6 +94,26 @@ export class CalculateComponent implements OnInit {
       pdfExportUtils.exportAsPDF();
 
       this.isLoading = false;
+
+      this.stopAnimate('#bmc-wbtn', 'animate');
+      this.stopAnimate('#at4-share', 'animate');
+      this.stopAnimate('.at-expanding-share-button-toggle-bg', 'animate');
     });
   }
+
+  animate(querySelector: string, className: string) {
+    const affectedElement = document.querySelector(querySelector);
+
+    if (affectedElement) {
+      affectedElement.classList.add(className);
+    }
+  }
+
+  stopAnimate(querySelector: string, className: string) {
+    const affectedElement = document.querySelector(querySelector);
+
+    if (affectedElement) {
+      affectedElement.classList.remove(className);
+    }
+  }
 }

src/app/components/loading/loading.component.html

@@ -1,13 +1,8 @@
 <article fxLayoutAlign="center center"
          [ngStyle.gt-sm]="{'font-size': '22px'}"
          [ngStyle.lt-md]="{'padding-left': '25px', 'padding-right': '25px', 'font-size': '17px'}"
-         class="margin-bottom-lg loading-text-area">Your PDF report generation is in progress.</article>
+         class="margin-bottom-md loading-text-area">While your PDF report generation is in progress, <br>please share and support us!</article>
 
 <div class="loading">
   <div class="dot" *ngFor="let i of [].constructor(5)"></div>
 </div>
-
-<article fxLayoutAlign="center center"
-         [ngStyle.gt-sm]="{'font-size': '22px'}"
-         [ngStyle.lt-md]="{'padding-left': '25px', 'padding-right': '25px', 'font-size': '17px'}"
-         class="margin-top-lg loading-text-area">Please don't forget to share and support <br>'Mortgage Expense Calculator'!</article>

src/app/components/loading/loading.component.scss

@@ -47,16 +47,4 @@
 			}
 		}
 	}
-
-	@keyframes wave {
-		50%,
-		75% {
-			transform: scale(2);
-		}
-
-		80%,
-		100% {
-			opacity: 0;
-		}
-	}
 }

src/assets/scss/animations.scss

@@ -0,0 +1,35 @@
+@keyframes wave {
+	50%,
+	75% {
+		transform: scale(2);
+	}
+
+	80%,
+	100% {
+		opacity: 0;
+	}
+}
+
+@keyframes tiny-wave {
+	50%,
+	75% {
+		transform: scale(1.5);
+	}
+
+	80%,
+	100% {
+		opacity: 0;
+	}
+}
+
+@keyframes bigger-wave {
+	50%,
+	75% {
+		transform: scale(3);
+	}
+
+	80%,
+	100% {
+		opacity: 0;
+	}
+}

src/assets/scss/custom-add-this-service-styles.scss

@@ -1,49 +1,83 @@
 body {
-  .at-expanding-share-button .at-expanding-share-button-services-list > li {
-    height: 40px !important;
-  }
-
-  .at-expanding-share-button .at-share-btn {
-    height: 30px !important;
-  }
-
-  .at-expanding-share-button .at-icon-wrapper {
-    height: 30px !important;
-    line-height: 30px !important;
-    width: 30px !important;
-  }
-
-  .at-expanding-share-button .at-icon {
-    height: 25px !important;
-    margin: 3px 0 !important;
-    width: 25px !important;
-  }
-
-  .at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-toggle {
-    height: 30px !important;
-  }
-
-  .at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-toggle-bg,
-  .at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-toggle-bg span {
-    height: 30px !important;
-    line-height: 30px !important;
-    width: 30px !important;
-  }
-
-  .at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-toggle-bg,
-  .at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-toggle-bg span {
-    height: 30px !important;
-    line-height: 30px !important;
-    width: 30px !important;
-  }
-
-  .at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-click-flash {
-    height: 30px !important;
-    width: 30px !important;
-  }
-
-  .at-expanding-share-button .at-expanding-share-button-toggle-bg > span {
-    background-size: 85% !important;
-    background-color: #3f51b5 !important;
-  }
+	.at-expanding-share-button .at-expanding-share-button-services-list > li {
+		height: 40px !important;
+	}
+
+	.at-expanding-share-button .at-share-btn {
+		height: 30px !important;
+	}
+
+	.at-expanding-share-button .at-icon-wrapper {
+		height: 30px !important;
+		line-height: 30px !important;
+		width: 30px !important;
+	}
+
+	.at-expanding-share-button .at-icon {
+		height: 25px !important;
+		margin: 3px 0 !important;
+		width: 25px !important;
+	}
+
+	.at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-toggle {
+		height: 30px !important;
+	}
+
+	.at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-toggle-bg,
+	.at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-toggle-bg span {
+		height: 30px !important;
+		line-height: 30px !important;
+		width: 30px !important;
+	}
+
+	.at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-toggle-bg,
+	.at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-toggle-bg span {
+		height: 30px !important;
+		line-height: 30px !important;
+		width: 30px !important;
+	}
+
+	.at-expanding-share-button.at-expanding-share-button-mobile .at-expanding-share-button-click-flash {
+		height: 30px !important;
+		width: 30px !important;
+	}
+
+	.at-expanding-share-button .at-expanding-share-button-toggle-bg > span {
+		background-size: 85% !important;
+		background-color: #3f51b5 !important;
+	}
+
+	#at4-share {
+		&.animate {
+			&::before {
+				content: '';
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				background: #fff !important;
+				animation-delay: 0.4s;
+				border-radius: 10px;
+				animation: tiny-wave 2s ease-out infinite;
+			}
+		}
+	}
+}
+
+@media only screen and (max-width: 800px) {
+	body {
+		.at-expanding-share-button-toggle-bg {
+			&.animate {
+				&::before {
+					content: '';
+					position: absolute;
+					width: 100%;
+					height: 100%;
+					background: #fff !important;
+					animation-delay: 0.4s;
+					border-radius: 50%;
+					animation: bigger-wave 2s ease-out infinite;
+				}
+			}
+		}
+	}
 }

src/assets/scss/custom-buymeacoffee-service-styles.scss

@@ -8,6 +8,19 @@ body {
 			height: 20px !important;
 			width: 20px !important;
 		}
+
+		&.animate {
+			&::before {
+				content: '';
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				background: #fff !important;
+				animation-delay: 0.4s;
+				border-radius: inherit;
+				animation: bigger-wave 2s ease-out infinite;
+			}
+		}
 	}
 }
 

src/styles.scss

@@ -1,5 +1,6 @@
 @import 'assets/scss/mixins.scss';
 @import 'assets/scss/media-queries.scss';
+@import 'assets/scss/animations.scss';
 @import 'assets/scss/custom-add-this-service-styles.scss';
 @import 'assets/scss/custom-buymeacoffee-service-styles';