Skip to content

Improve study test iframe preview health checks, app status messaging, and overlays#807

Open
mohiuddinshahrukh wants to merge 4 commits into
hpi-studyu:devfrom
mohiuddinshahrukh:fix/study-test-preview-health
Open

Improve study test iframe preview health checks, app status messaging, and overlays#807
mohiuddinshahrukh wants to merge 4 commits into
hpi-studyu:devfrom
mohiuddinshahrukh:fix/study-test-preview-health

Conversation

@mohiuddinshahrukh
Copy link
Copy Markdown
Collaborator

Summary

This PR improves the study test preview flow between designer_v2 and the embedded app iframe.

It adds:

  • app reachability checks before attempting iframe preview
  • staged preview overlay states in the designer
  • app-to-designer preview status messaging for loading/loaded/error
  • nicer glass-style preview overlays
  • safer preview handling for incomplete studies
  • a fix so the selected preview route is not reset during rebuilds

Behavior

The test preview now follows this flow:

  • health check
  • iframe connection
  • app loading
  • app shown

If the app is unreachable:

  • local/dev shows a local app unavailable message
  • deployed mode shows a maintenance/unavailable message

Scope

This PR intentionally includes only the files related to:

  • iframe preview health/status handling
  • preview overlay UX
  • preview route/reset reliability

@mohiuddinshahrukh mohiuddinshahrukh self-assigned this Apr 9, 2026
@johannesvedder johannesvedder self-requested a review April 20, 2026 10:36
Copy link
Copy Markdown
Contributor

@johannesvedder johannesvedder left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR and the additions. It looks much better now! Some things I noticed:

  1. Can we remove the transparency? image

  2. Let's skip the /onboarding for the preview as it's purpose is to introduce new participants to the app:

Image
  1. When switching pakes using the links on the left side, I am stuck in the checking connection loading screen. I need to click "Reset" to show the correct page.

mohiuddinshahrukh and others added 3 commits April 21, 2026 13:07
Disable test page navigation until the iframe preview is ready, route page changes through postMessage after load, and keep preview back behavior on logical onboarding steps. Clear stale preview subject references so reset previews can recreate a missing subject.
@mohiuddinshahrukh mohiuddinshahrukh added bug Something isn't working app designer_v2 labels Apr 21, 2026
@mohiuddinshahrukh
Copy link
Copy Markdown
Collaborator Author

One two and three have been fixed, although number 3 is a bit more complicated to solve since the back button action is a bit of a tricky thing to handle, it sometimes makes the phone app crash and sometimes behaves unexpectedly, this can be easily reproduced by clicking schedule and then back on the deployed version also.

Shall you find some other room for improvements, let me know.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

app bug Something isn't working designer_v2

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants