Scroll Freezes When Changing Windows

Encountering a bug when trying to switch from one ionic slide to the next: Loom | Free Screen & Video Recording Software

Anybody think they know what the problem could be?

import { Component, OnInit, ViewChild, ChangeDetectorRef } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Work } from 'src/app/interfaces/work';
import { SelectedWorksService } from 'src/app/services/selected-works.service';
import { DataApiService } from 'src/app/services/data-api.service';
import { IonSlides, AlertController } from '@ionic/angular';
import { from } from 'rxjs';
import { Artist } from 'src/app/interfaces/artist';
import { User } from 'src/app/interfaces/user';
import { Tag } from 'src/app/interfaces/tag';

interface OrientationSlide {
  name: string,
  hasLoaded: boolean,
  works: Array<Work>,
}

@Component({
  selector: 'app-works',
  templateUrl: './works.page.html',
  styleUrls: ['./works.page.scss'],
})
export class WorksPage implements OnInit {

  @ViewChild("slides") slides: IonSlides;

  slideOpts = {
    initialSlide: 0,
    speed: 400,
    autoHeight: true,
    resizeObserver: true,
    updateOnWindowResize: true,
  };
  activeSlide = 0;
  orientations: Array<OrientationSlide> = [
    {
      name: "portrait",
      hasLoaded: false,
      works: [],
    },
    {
      name: "landscape",
      hasLoaded: false,
      works: [],
    },
    {
      name: "square",
      hasLoaded: false,
      works: [],
    },
    {
      name: "panoramic",
      hasLoaded: false,
      works: [],
    },
  ];

  user: User = null;
  pageTitle: string = null;

  // Possible filter data
  artist: Artist = null;
  genre: Tag = null;

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private selectedWorksService: SelectedWorksService,
    private dataApi: DataApiService,
    private changeDetector: ChangeDetectorRef,
    private alertController: AlertController,
  ) { }

  ngOnInit() {
    let portraitOrientation = this.orientations.find(o => o.name === 'portrait');
    portraitOrientation.works = this.route.snapshot.data['works'];
    portraitOrientation.hasLoaded = true;

    this.user = this.route.snapshot.data['user'];

    // Filters
    this.artist = this.route.snapshot.data['artist'];
    this.genre = this.route.snapshot.data['genre'];

    this.pageTitle = (this.artist && `${this.artist.firstName} ${this.artist.lastName}`)
      || (this.genre && this.genre.name) || null;
  }

  async onWorkClick(work: Work) {
    if (!this.user.isPremier()) {
      this.router.navigateByUrl(`/tabs/work/${work.workId}`);
      return;
    }

    if (work.hasPermission) {
      this.selectedWorksService.toggle(work.workId.toString());
    }
    else {
      const alert = await this.alertController.create({
        header: 'upgrade subscription',
        message: 'You are not currently subscribed to view this work.',
        buttons: ['ok']
      });

      await alert.present();
    }
  }

  onSelectedWorksClick() {
    this.router.navigate(['/tabs/selected-works/choose-display']);
    // const workIds = this.selectedWorksService.getSelected();
    // if (workIds.length === 1) {
    //   const workId = workIds[0];
    //   this.router.navigate([`/tabs/work/${workId}/choose-display`]);
    // } else {
    //   this.router.navigate(['/tabs/selected-works/choose-display']);
    // }
  }

  isSelected(workId: number) {
    return this.selectedWorksService.isSelected(workId.toString());
  }

  getNumSelected() {
    return this.selectedWorksService.getSelected().length;
  }

  clearSelected() {
    this.selectedWorksService.clear();
  }

  goToOrientation(orientation: string) {
    this.slides.slideTo(this.orientations.findIndex(o => o.name === orientation));
  }

  goToArtistSlide() {
    this.slides.slideTo(this.orientations.length);
  }

  onSlideChange() {
    from(this.slides.getActiveIndex()).subscribe(i => {
      let orientation = this.orientations[i];

      if (i !== 0 && orientation && orientation.works.length === 0) {
        let filter = this.route.snapshot.paramMap.get('filter');
        let filterValue = this.route.snapshot.paramMap.get('filterValue');
        let filters = [{
          name: 'orientation',
          value: orientation.name
        }];

        if (filter) {
          filters.push({ name: filter, value: filterValue });
        }

        this.dataApi.getFilteredWorks(filters).subscribe(works => {
          orientation.hasLoaded = true;
          if (works) {
            orientation.works = works;
            this.changeDetector.detectChanges();
          }
        });
      }

      this.activeSlide = i;
    });

  }
}

Here is the code above for the window shown in the loom where it freezes on tab change to a new window. Is there an easy fix for this?

1 post - 1 participant

Read full topic