8th wall option page does not function when toggle off the splash screen in commercial mode

Question

I have 8th wall project which the user flow is like this

Screen start - Permission for camera and motion - tap to start - page to select AR portal - Camera active and portal shows

However, after turning on the commercial plan and then once I get access to turn off the default splash screen,

Then the flow is stuck in the select portal page. In debug mode it shows that it is selected but it the screen does not shows and goes to next step.

I still not want have the default splash screen but my project funcitoning well.

How can I manually turn off the splash screen in code? And how can I prevent the error happening in option page?

The below is the code for the loading page xrextras

// Display loading screen.
const onxrloaded = () => {
  XR8.addCameraPipelineModule(window.LoadingFactory.pipelineModule())
}
const loadingComponent = {
  schema: {
    loadBackgroundColor: {default: ''},
    cameraBackgroundColor: {default: ''},
    loadImage: {default: ''},
    loadAnimation: {default: ''},
  },
  init() {
  /*
    let aframeLoaded = false
    this.el.addEventListener('loaded', () => {
      aframeLoaded = true
    })
    const aframeDidLoad = () => aframeLoaded
    const load = () => {
      LoadingFactory.setAppLoadedProvider(aframeDidLoad)
      const waitForRealityTexture =
          !!(this.el.sceneEl.attributes.xrweb || this.el.sceneEl.attributes.xrface)
      LoadingFactory.showLoading({onxrloaded, waitForRealityTexture})
    }
    window.XRExtras ? load() : window.addEventListener('xrextrasloaded', load, {once: true})

    const loadImg = document.querySelector('#loadImage')

    if (loadImg) {
      if (this.data.loadImage !== '') {
        loadImg.src = document.querySelector(this.data.loadImage).src
      }

      if (this.data.loadAnimation !== '') {
        loadImg.classList.remove('spin')
        if (this.data.loadAnimation !== 'none') {
          loadImg.classList.add(this.data.loadAnimation)
        }
      }
    }

    const loadBackground = document.querySelector('#loadBackground')

    if (loadBackground) {
      loadBackground.style.backgroundColor = this.data.loadBackgroundColor
    }

    const requestingCameraPermissions = document.querySelector('#requestingCameraPermissions')

    if (requestingCameraPermissions) {
      requestingCameraPermissions.style.backgroundColor = this.data.cameraBackgroundColor
    }
  },
  remove() {
    XR8.removeCameraPipelineModule('loading')
  },*/
   const splash = document.querySelector('#splashimage')
    const addXRWeb = () => {
      if (this.data.requestGyro === true && this.data.disableWorldTracking === true) {
        // If world tracking is disabled, and you still want gyro enabled (i.e. 3DoF mode)
        // Request motion and orientation sensor via XR8's permission API
        XR8.addCameraPipelineModule({
          name: 'request-gyro',
          requiredPermissions: () => ([XR8.XrPermissions.permissions().DEVICE_ORIENTATION]),
        })
      }
      this.el.sceneEl.setAttribute('xrweb', `disableWorldTracking: ${this.data.disableWorldTracking}`)
       const waitForRealityTexture =
          !!(this.el.sceneEl.attributes.xrweb || this.el.sceneEl.attributes.xrface)
      LoadingFactory.showLoading({onxrloaded, waitForRealityTexture})
      window.addEventListener('xrextrasloaded', {once: true})
      setTimeout(() => {
        splash.style.display = 'none'
        console.log('exec')
       

    const loadImg = document.querySelector('#loadImage')

    if (loadImg) {
      if (this.data.loadImage !== '') {
        loadImg.src = document.querySelector(this.data.loadImage).src
      }

      if (this.data.loadAnimation !== '') {
        loadImg.classList.remove('spin')
        if (this.data.loadAnimation !== 'none') {
          loadImg.classList.add(this.data.loadAnimation)
        }
      }
    }

    const loadBackground = document.querySelector('#loadBackground')

    if (loadBackground) {
      loadBackground.style.backgroundColor = this.data.loadBackgroundColor
    }

    const requestingCameraPermissions = document.querySelector('#requestingCameraPermissions')

    if (requestingCameraPermissions) {
      requestingCameraPermissions.style.backgroundColor = this.data.cameraBackgroundColor
    }
      // document.getElementById('scn-ui').style.display = 'block'
      }, 3000)
      // splashimage.classList.add('hidden')

      // Play background music (mp3) after user has clicked "Start AR" and the scene has loaded.
      this.el.sceneEl.addEventListener('realityready', () => {
       // const snd = document.querySelector('[sound]')
       // snd.components.sound.playSound()
      })
    }
    setTimeout(() => {
      addXRWeb()
    }, 100)
},
}

export {loadingComponent}

This is how the option select page is structured

//
  // switch portal
  //

  const portalButtons = document.querySelectorAll('.choose-portal')

  function switchPortal(portalType) {
    const scene_content = document.getElementById('scene_content')
    const before_portal = document.getElementById('screen-before-portal')
    scene_content.setAttribute('visible', true)
    setTimeout(() => {
      before_portal.addEventListener('click', window.firstPlaceEvent)
    }, 300)
    const portalA = document.getElementById('portalA')
    const portalB = document.getElementById('portalB')

    if (portalType === 'portalA') {
      console.log('portalA')
      portalA.setAttribute('visible', true)
      portalB.setAttribute('visible', false)

      window.portalType = 'portal-a';
      window.history.pushState('portal_a', 'Portal A', 'portal-a');
      

    } else if (portalType === 'portalB') {
      console.log('portalB')
      portalA.setAttribute('visible', false)
      portalB.setAttribute('visible', true)

      window.portalType = 'portal-b';
      window.history.pushState('portal_b', 'Portal B', 'portal-b');
    }
  }

  window.switchPortal = switchPortal;

  portalButtons.forEach((portalButton) => {
    const portalType = portalButton.getAttribute('data-name')
    portalButton.addEventListener('click', () => {
      console.log(portalType)
      switchPortal(portalType)
    })
  })




//
  // show/hide screens
  //
  function goToScreen(screen = '') {
    const nameScreenShow = screen
    const nameScreenHide = window.store.activeScreen

    const screenHide = document.getElementById(`screen-${nameScreenHide}`)
    const screenShow = document.getElementById(`screen-${nameScreenShow}`)

    if (nameScreenHide !== nameScreenShow) {
      // show/hide screens
      if (screenHide) {
        screenHide.classList.remove('show')
      }

      if (screenShow) {
        screenShow.classList.add('show')
        window.store.activeScreen = nameScreenShow
        const screenshow = document.querySelectorAll('.show')
        screenshow.forEach((item) => {
          console.log(item.id)
        })
      }
      // } else {
      //   console.error('No such screen exists: "', nameScreenShow, '" or "', nameScreenHide, '"')
      // }
    }
  }

  function hideScreen(screen = '') {
    const nameScreenShow = screen

    const screenShow = document.getElementById(`screen-${nameScreenShow}`)

    if (nameScreenShow) {
      if (screenShow) {
        screenShow.classList.remove('show')
        window.store.activeScreen = ''
      }
    }
  }

  window.goToScreen = goToScreen
  window.hideScreen = hideScreen



document.getElementById('screen-start').addEventListener('click', function(event) {
        if(window.portalType){
            if(window.portalType == 'portal-a'){
                window.goToScreen('before-portal');
                window.switchPortal('portalA')
            }

            if(window.portalType == 'portal-b'){
                window.goToScreen('before-portal');
                window.switchPortal('portalB')
            }
        }else{
            window.goToScreen('choose-portal');
        }

        ```


And this is the something I got from 8th wall support but I really don't know what to do after this.

####
When developing in the cloud editor, you should avoid using things like window.onload or similar, as they would fire during the splash screen before your app.js code gets executed, etc.
The other case where I saw disabling the splash screen cause an issue for a customer was in a non-aframe project they were missing the meta viewport tag in head.html
####

this project was built with a-frame

Any help or clue will be truley appreciated

Thank you in advance