Fix firefox endless spinner in stream

fix a firefox bug where the spinner would not disappear, apparently when
the user would see a stream.
The reason seems to be ngparticles in combination with firefox, where
firefox would be stuck in never-stable when ngparticles was loaded
before the browser was ready
This commit is contained in:
Sean 2021-06-24 15:50:15 +02:00
parent c286e0ff76
commit eed3bca25b
3 changed files with 12 additions and 2 deletions

View File

@ -1,3 +1,3 @@
<div [osResized]="resizeSubject" class="particle-wrapper">
<div [osResized]="resizeSubject" *ngIf="isStable" class="particle-wrapper">
<Particles id="particles" [options]="options" (particlesLoaded)="particlesLoaded($event)"> </Particles>
</div>

View File

@ -7,6 +7,7 @@ import { Subject } from 'rxjs';
import { auditTime } from 'rxjs/operators';
import { Container } from 'tsparticles';
import { OpenSlidesStatusService } from 'app/core/core-services/openslides-status.service';
import { ConfigService } from 'app/core/ui-services/config.service';
import { ElementSize } from 'app/shared/directives/resized.directive';
import { BaseViewComponentDirective } from 'app/site/base/base-view';
@ -20,6 +21,11 @@ import { particleConfig, particleOptions } from './particle-options';
encapsulation: ViewEncapsulation.None
})
export class ApplauseParticleDisplayComponent extends BaseViewComponentDirective {
/**
* Firefox has an issue with ngParticles and stable state
*/
public isStable = false;
public options = particleOptions;
public resizeSubject = new Subject<ElementSize>();
private resizeAuditTime = 200;
@ -38,6 +44,7 @@ export class ApplauseParticleDisplayComponent extends BaseViewComponentDirective
translate: TranslateService,
matSnackBar: MatSnackBar,
configService: ConfigService,
osStatus: OpenSlidesStatusService,
private applauseService: ApplauseService
) {
super(title, translate, matSnackBar);
@ -52,6 +59,10 @@ export class ApplauseParticleDisplayComponent extends BaseViewComponentDirective
this.particleImage = particleImage || undefined;
})
);
osStatus.stable.then(() => {
this.isStable = true;
});
}
private setParticleImage(particleImage: string): void {

View File

@ -44,7 +44,6 @@ $radius: 5px;
.video-player {
display: block;
width: 500px;
max-height: 280px;
}
.call-body {