Uncaught (in promise): Error: 3000ms timeout exceeded Error: 3000ms timeout exceeded

I'm super new with promises, I'm trying to implement them but I have this error
Uncaught (in promise): Error: 3000ms timeout exceeded Error: 3000ms timeout exceeded I'm also getting problem using Promise.all().then() because it expected one argument. Environments: Angular v12 and Three.js I hope that someone could help me, thanks in advance.

  ngOnInit(): void {
    this.onPageLoad();
  }

  onPageLoad(options) {
    this.loadPromise();
 
    Promise.all().then(() => {
      this.resize();
      this.setupResize();
      this.addObjects();
      this.render();
    });
  }

loadPromise() {
    // Uncaught (in promise): Error: 3000ms timeout exceeded Error: 3000ms timeout exceeded
    const fontOpen = new Promise((resolve, reject) => {
      new FontFaceObserver("Open Sans").load().then(() => resolve);
      console.log('Output Playfair Display has loaded.');
    })

    const fonPlayfair = new Promise((resolve, reject) => {
      new FontFaceObserver("Playfair Display").load().then(() => resolve);
      console.log('Output Playfair Display has loaded.');
    })

    // Preload images
    const preloadImages = new Promise((resolve, reject) => {
        imagesLoaded(document.querySelectorAll("img"), { background: true }, resolve);
        console.log("Output img has loaded.")
    });

    let allDone = [fontOpen, fonPlayfair, preloadImages];
  } 

Hi @danh thanks to answer me. I solved with your help the problem about the promises (code above), then I tried to change the default loading timeout in 6 seconds and I got this error Error: Uncaught (in promise): Error: 6000ms timeout exceeded . So I think that increasing timeout doesn't change the result

async onPageLoad() {
    const promises = this.loadPromise();
    
    await Promise.all([promises]).then(() => {
      this.resize();
      this.setupResize();
      this.addObjects();
      this.render();
    });
  }