Feature request: Loading indicator Boolean

[simple-scout]

Is your feature request related to a problem? Please describe. I'm using ngx-tweet as the focal point of a dialog component. The dialog pops up before the Twitter scripts are inserted, so I would like to include a loading animation to notify users.

Describe the solution you'd like I'm new to Angular, so take it with a grain of salt. Most of the solutions for this type of logic include a simple boolean on the component. Set the a boolean like this.loading to true when the component is constructed, and set this.loading = false; after loading completes.

I tried to fork and implement, but I ran into an issue. ngx-tweet is currently using the ngAfterViewInit() method to insert the Twitter scripts into the DOM. If I try to change my loading boolean to false in that lifecycle hook, I end up with an ExpressionChangedAfterItHasBeenCheckedError

Describe alternatives you've considered None.

Additional context Here's what I tried to do with your ngx-tweet.component:

export class NgxTweetComponent implements AfterViewInit {
  loading = true;
  @Input()
  public tweetId: string;

  constructor(private _elementRef: ElementRef, private _ngxTweetService: NgxTweetService) {
    console.log('Constructor loading ' + this.loading);
  }

  public ngAfterViewInit(): void {
      this._ngxTweetService
          .loadScript()
          .subscribe((twitterData: any) => {
              twitterData.widgets.createTweet(this.tweetId, this._elementRef.nativeElement, {});
          });
    this.loading = false;
    console.log('after init loading '  + this.loading);
  }
}

And here's the error:

Have you considered such a feature? Do you see a clean way to implement? Thanks.

[rms-bc]

Hello there! First of all, thanks for your interest in this project.

I didn't consider this feature in a first because I had no need for it. Now if you need it, I'll see what I can do. Get back to you soon.

[rms-bc]

OK, I've added a feature allowing you to provide loading content that will get transcluded when necessary.

You can use it like this for example:

`

Loading...

`

Hope you'll keep up the good work! If you have any feedbacks I'm all ears.

[simple-scout]

Thanks for the quick response!

Did you package your changes on npm already? From what I'm seeing, I believe these changes should be available in ngx-tweet 2.0.3. Is that correct?

If so, I'm struggling to use it correctly. Here's a StackBlitz that's similar to my use case.

To try and test the loading indicator functionality, I'm using Chrome Dev Tools to throttle the load speed to a "Slow 3G" connection. The loading text does not appear. Eventually I'd like to get an angular-material mat-spinner component to work.

Am I using this correctly? Thanks again.

I've got a screenshot of my StackBlitz/devtools, but Github won't allow me to post it. Let me know if that would be useful and I can try to get it to you.

[rms-bc]

I’m gonna check this ASAP. Not sure about what you’re experiencing though. On mobile, I can see the loading message being displayed. As soon as I get access to a computer I’ll let you know!

[simple-scout]

I think I've got a better handle on what's going on.

The first time you use that StackBlitz, the loading indicator is there. However, there's a significant period of time between when the loading text disappears and when the Tweet is rendered. I'm guessing that the loading indicator vanishes when the Twitter scripts make their requests. There is then some latency as the Twitter scripts download the new content, which results in neither the loading indicator nor the Tweet being rendered.

If you close the Tweet then click the button to reopen it, the behavior is different. The loading text is not there at all. I'm guessing that all of the load time in this scenario can be attributed to the Twitter scripts.

Does that make sense?

[rms-bc]

Yes that is correct. The loading text is displayed while Twitter script is loading. But we only load it once, therefore not displaying loading text ever again (which makes sense as it is pointless to download the same script over and over again). Your assumption is correct: the latency you experienced is due to Twitter downloading its tweet content. Unfortunately, there is not much I can do about it in this library without adding some ugly code, as it was not meant to solve this issue.

However, I believe that you can hook yourself into Twitter's event loop and get notified once everything is loaded. Then you will have the ability to show/hide your loader.

Hope you'll find what you need, friend!

[simple-scout]

Thanks, man. Keep up the good work!

[MartinoMensio]

Same issue here. I found a way that can be quite useful, and waits for the twitter-widget to be loaded:

import * as $ from 'jquery';

// this function is declared in your controller (source: https://gist.github.com/chrisjhoughton/7890303)
waitForEl(selector, callback) {
    if ($(selector).length) {
      callback();
    } else {
      setTimeout(() => {
        this.waitForEl(selector, callback);
      }, 500);
    }
  }

// then on the ngOnInit just wait for the twitter-widget to appear
// if you want to wait for a specific tweet id, add to the selector [data-tweet-id=123]
ngOnInit() {
    this.tweets_loading = true;
    this.waitForEl('twitter-widget', () => {
      this.tweets_loading = false;
    });
  }

Cheers, Martino