Repository: oppia/oppia
File: core/templates/base-components/oppia-footer.component.ts (TypeScript)

Code before:
        setTimeout(() => {
          if (status) {
            this.alertsService.addInfoMessage('Done!', 1000);
            this.ngbModal.open(ThanksForSubscribingModalComponent, {
              backdrop: 'static',
              size: 'xl',
            });
          } else {
            this.alertsService.addInfoMessage(
              AppConstants.MAILING_LIST_UNEXPECTED_ERROR_MESSAGE,
              10000
            );
          }
          this.subscriptionProcessing = false;
        }, 500);
      })
      .catch(errorResponse => {
        setTimeout(() => {
          this.alertsService.addInfoMessage(
            AppConstants.MAILING_LIST_UNEXPECTED_ERROR_MESSAGE,
            10000
          );
          this.subscriptionProcessing = false;
        }, 500);
      });
  }

  navigateToAboutPage(): void {
    this.siteAnalyticsService.registerClickFooterButtonEvent(
      NavbarAndFooterGATrackingPages.ABOUT
    );
    this.windowRef.nativeWindow.location.href = '/about';
  }

  navigateToTeachPage(): void {
    this.siteAnalyticsService.registerClickFooterButtonEvent(
      NavbarAndFooterGATrackingPages.TEACH
    );
    this.windowRef.nativeWindow.location.href = '/teach';
  }
}


Review comment (bug):
Instead of doing this can't we just show the success or failure message as soon as the response from the subscription is received (like we were doing previously)? We should avoid using a setTimeout to make the user experience as smooth as possible. If a response is received before the setTimeout expires, the user will have to wait the remaining time before seeing the appropriate message which is not the best ux.

Code after:
    // Convert null or empty string to null for consistency.
    const userName = this.name ? String(this.name) : null;
    if (this.isAlreadySubscribed(String(this.emailAddress))) {
      this.emailDuplicated = true;
    } else {
      this.subscriptionProcessing = true;
      this.emailsSubscribed.add(String(this.emailAddress));
      this.mailingListBackendApiService
        .subscribeUserToMailingList(
          String(this.emailAddress),
          userName,
          AppConstants.MAILING_LIST_WEB_TAG
        )
        .then(status => {
          if (status) {
            this.alertsService.addInfoMessage('Done!', 1000);
            this.ngbModal.open(ThanksForSubscribingModalComponent, {
              backdrop: 'static',
              size: 'xl',
            });
          } else {
            this.alertsService.addInfoMessage(
              AppConstants.MAILING_LIST_UNEXPECTED_ERROR_MESSAGE,
              10000
            );
          }
          this.subscriptionProcessing = false;
        })
        .catch(errorResponse => {
          this.alertsService.addInfoMessage(
            AppConstants.MAILING_LIST_UNEXPECTED_ERROR_MESSAGE,
            10000
          );
          this.subscriptionProcessing = false;
        });
    }
  }

  navigateToAboutPage(): void {
    this.siteAnalyticsService.registerClickFooterButtonEvent(
      NavbarAndFooterGATrackingPages.ABOUT
    );
    this.windowRef.nativeWindow.location.href = '/about';
  }

  navigateToTeachPage(): void {
    this.siteAnalyticsService.registerClickFooterButtonEvent(
      NavbarAndFooterGATrackingPages.TEACH
    );
    this.windowRef.nativeWindow.location.href = '/teach';
  }