Smartedit problems with permanent Loading in preview

[sergiutorjescu]

Environment Details Spartacus: version 1.2.1 Browser: Chrome Version 80.0.3987.132 (Official Build) (64-bit) OS: Windows 10

Steps to Reproduce In smartedit, go to pages, select one of the pages When the Loading overlay appears, only SOMETIMES it works, the rest of the time it hangs there forever.

However, in Mozilla Firefox it seems to work alot better, we also have a VPN which slows down the actual load time of the DOM. The difference is that Chromes takes in average 5.5 seconds, sometimes more, which I know is alot, this is due to vendor.js being about 10MB of size and images that are not properly adjusted for the web, while Mozilla takes like 600+ miliseconds and less resources seem to load.

Package json file dependencies

` "dependencies": {
    "@angular/animations": "~8.2.14",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/platform-server": "~8.2.14",
    "@angular/pwa": "^0.803.2",
    "@angular/router": "~8.2.14",
    "@angular/service-worker": "~8.2.14",
    "@compodoc/compodoc": "^1.1.10",
    "@ng-bootstrap/ng-bootstrap": "^5.1.0",
    "@ng-select/ng-select": "^3.0.7",
    "@ngrx/effects": "~8.3.0",
    "@ngrx/router-store": "~8.3.0",
    "@ngrx/store": "~8.3.0",
    "@ngu/carousel": "^1.5.5",
    "@nguniversal/express-engine": "^8.1.1",
    "@nguniversal/module-map-ngfactory-loader": "^8.1.1",
    "@spartacus/assets": "~1.2.1",
    "@spartacus/core": "~1.2.1",
    "@spartacus/storefront": "~1.2.1",
    "@spartacus/styles": "~1.2.1",
    "@types/googlemaps": "^3.37.5",
    "angular-2-local-storage": "^3.0.2",
    "bootstrap": "^4.2.1",
    "classlist.js": "^1.1.20150312",
    "hamburgers": "^1.1.3",
    "hammerjs": "^2.0.8",
    "i18next": "^15.0.6",
    "i18next-xhr-backend": "^2.0.1",
    "lodash": "^4.17.15",
    "moment-timezone": "^0.5.27",
    "ng5-slider": "^1.2.4",
    "ngx-cookie-service": "^2.2.0",
    "ngx-device-detector": "^1.3.9",
    "ngx-image-cropper": "~2.0.3",
    "ngx-infinite-scroll": "^8.0.0",
    "node-sass": "^4.13.0",
    "rxjs": "^6.4.0",
    "ts-loader": "^6.0.4",
    "tslib": "^1.10.0",
    "typeface-quicksand": "0.0.71",
    "web-animations-js": "^2.3.2",
    "zone.js": "^0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.20",
    "@angular-devkit/build-ng-packagr": "~0.803.20",
    "@angular/cli": "~8.3.20",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@ngrx/store-devtools": "~8.3.0",
    "@types/i18next": "^12.1.0",
    "@types/jasmine": "~3.4.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~12.7.3",
    "chalk": "^2.4.2",
    "codelyzer": "~5.1.0",
    "commander": "^3.0.0",
    "concurrently": "^4.1.2",
    "conventional-commits-parser": "^3.0.1",
    "core-js": "^3.6.4",
    "ejs": "^2.6.2",
    "faker": "^4.1.0",
    "gh-got": "^8.0.1",
    "gh-pages": "^2.1.1",
    "git-raw-commits": "^2.0.0",
    "http-server": "^0.11.1",
    "i18n-lint": "^1.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-marbles": "^0.6.0",
    "json-server": "^0.15.0",
    "karma": "~4.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-cli": "^2.0.0",
    "karma-coverage": "^2.0.1",
    "karma-coverage-istanbul-reporter": "^2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "karma-junit-reporter": "^1.2.0",
    "ng-packagr": "^5.5.1",
    "npm-package-versions": "^1.0.1",
    "prettier": "1.18.2",
    "release-it": "^12.3.6",
    "sass": "^1.22.10",
    "semver": "^6.3.0",
    "semver-extra": "^3.0.0",
    "start-server-and-test": "^1.10.0",
    "svg-sprite": "^1.5.0",
    "through2": "^3.0.1",
    "ts-node": "~8.3.0",
    "tsickle": "0.37.0",
    "tslib": "^1.10.0",
    "tslint": "~5.19.0",
    "typescript": "~3.5.0",
    "webpack-cli": "^3.3.7"
  }`

## Additional Information The setup was done VIA the SAP documentation, nothing seems to be missing, everything works as it should.

Could the error be related to the DOM loading time? Is is possible that because of the big amount of resources that are loaded some async data "gets lost"?

Browser console error:

Network tab cx-preview is canceled:

Is there any way to debug this issue? If you need any more information, please feel free to ask. Any help or extra input could help!

[sergiutorjescu]

Apparently this issue was caused by the webApplicationInjector.js in my case, I had it create the script in the app module ts file and the data being loaded async, sometimes the webinjector would be loaded too slow. It needs to be in the index.html.

I have a question, if I want the data-smartedit-allow-origin not to have a hardcoded string value there, because we also make builds on some test servers and then the SE will not work, how could we approach this? Is just hardcoding more values in the attribute the only way to handle this?

[Xymmer]

@sergiutorjescu Glad you found your solution

We will ask SmartEdit team the question about data-smartedit-allow-origin