Cloud Library stuck on "Loading" when iframe loads before admin-page.js

Open
  • Is something wrong?
#1,211 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
56/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
javascript, php
Domain
frontend

Research direction

Start with render_dashboard_page() in inc/dam.php and the iframe and message listeners in assets/src/media/admin-page.js; trace how the iframe load and getUrl handshake are handled. The report also suggests a possible service-side change in Dam.vue, whose location is not given. Done means the Cloud Library loads when the iframe and footer script run in either order, with an error shown if the handshake times out.

Written by the indexing model from the issue text.

Description

bug-report customer report
Description

The Cloud Library page (Optimole > Cloud Library) can stay on the "Loading..." screen forever. It is intermittent and depends on how fast the browser and the admin page are.

render_dashboard_page() in inc/dam.php outputs the hidden #om-dam iframe and the .om-dam-loader overlay. Both things that unblock the page are wired up in assets/src/media/admin-page.js, which is enqueued in the footer:

  1. the iframe load listener that hides the outer loader and shows the iframe;
  2. the message listener that answers the DAM app's getUrl request with siteUrl.

On a heavy admin page (many plugins) or a slower machine, the iframe can finish loading and Dam.vue (optimole-service) can send getUrl before the footer script has run. Both events are missed:

  • the outer loader never hides, because the load event already fired;
  • Dam.vue waits forever on its own "Loading..." screen, because it sends getUrl once, with no retry or timeout.
Reproduction

Minimal harness in headless Chromium: the same markup as render_dashboard_page(), the real https://dashboard.optimole.com/dam iframe, and admin-page.js logic served from a footer script with an artificial delay.

Footer script iframe load getUrl sent listeners attached Result
no delay 1986 ms 2084 ms 6 ms loads
4 s delay 1303 ms 1356 ms 4004 ms stuck on Loading

Customer evidence matches both halves:

  • the WP Admin console shows a warning from dashboard.optimole.com:1 while the outer loader is still visible, so the iframe had loaded;
  • forcing #om-dam visible from the console reveals the DAM app's own "Loading..." screen, so the getUrl handshake was missed.

Seen with Optimole 4.2.17, WP 7.1.4, Chrome 116 (macOS 10.13) and intermittently on Chrome 156 (macOS 14), with Elementor, Yoast, WPForms and SearchWP active. Works in Firefox and from the standalone dashboard Library.

Suggested fix
  • Plugin: attach the listeners before the iframe can load (inline script right after the iframe, or register them from admin_head), and/or on init check whether the iframe has already loaded instead of relying only on the load event.
  • Service (Dam.vue): resend getUrl on an interval until setSource gets an answer, and show an error after a timeout instead of loading forever.
Workaround (verified in the harness)

Answer getUrl from admin_head on the optimole_page_optimole-dam screen: hide .om-dam-loader, show #om-dam, and post { siteUrl: get_site_url(), type: 'om-dam', context: 'browse' } back to event.source. A second reply from admin-page.js is harmless, because Dam.vue removes setSource after the first one.

Customer report: https://secure.helpscout.net/conversation/3496753537/

Dominant language
PHP
Stars
74
Forks
14
Avg merge
1d 20h
Merged PRs (30d)
39

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from Codeinwp/optimole-wp

All issues in Codeinwp/optimole-wp

Similar issues

More PHP issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.