Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Show loading indicator while ViaHTML iframe is loading #465

Merged
merged 5 commits into from
May 4, 2021
Merged

Show loading indicator while ViaHTML iframe is loading #465

merged 5 commits into from
May 4, 2021

Commits on May 4, 2021

  1. Show loading spinner while ViaHTML iframe is loading 

    In Safari there is no indicator that anything is loading once the main
frame has loaded, the user just sees a blank white space where the
iframe is.

To provide a better experience add a loading spinner in the center of
the page above the iframe in all browsers. This is shown until the iframe reports the
document metadata to the parent frame for the first time, corresponding
to the `DOMContentLoaded` event having been received in the iframe. This
is also when the tab title gets set.

The loading spinner HTML and SVG have been taken from the
`annotation.html.jinja2`, `bouncer.css` and `hypothesis-icon.svg` files
in the hypothesis/bouncer repository. All of the resources have been
inlined here, which optimizes loading a little, but we could quite
easily move them to external resources in future for maintainability.

Fixes hypothesis/viahtml#155
    @robertknight
    robertknight committed May 4, 2021
    Configuration menu
    Copy the full SHA
    58d3b22 View commit details
    Browse the repository at this point in the history

  2. Send metadatachange message to parent frame in PDF viewer 

    When visiting `http://<VIA_DOMAIN>/<PDF_URL>` then the PDF viewer is
displayed inside an iframe. In order for the top frame rendered by the
`proxy` view to reflect the document title and PDF URL the PDF viewer
iframe needs to send the same `metadatachange` message that ViaHTML
sends.

The "real" PDF title is not available until the document has loaded, and
is often incorrect anyway. Therefore we send the filename of the PDF
extracted from the URL if available, or the domain from which the PDF
was loaded otherwise.
    @robertknight
    robertknight committed May 4, 2021
    Configuration menu
    Copy the full SHA
    822ff19 View commit details
    Browse the repository at this point in the history

  3. Tweak the loading spinner animation 

     - Wait for .5s before showing the spinner, to avoid an unnecessary
   flash if the content loads quickly

 - Fade the spinner in and out over 200ms to reduce the flicker effect

 - Change the class name from `js-loading-spinner` to a more generic
   `js-loading-indicator` in case we decide to change the indicator type
   in future (eg. from a spinner to a progress bar)
    @robertknight
    robertknight committed May 4, 2021
    Configuration menu
    Copy the full SHA
    f6d98a9 View commit details
    Browse the repository at this point in the history

  4. Replace loading spinner with bar across top of screen 

    Replace the loading spinner in the center of the screen with a thin red
bar at the top of the screen. This indicator is modeled after the one used by
GitHub (a thin blue bar) and PDF.js (a slightly thicker white bar).
    @robertknight
    robertknight committed May 4, 2021
    Configuration menu
    Copy the full SHA
    240d3bd View commit details
    Browse the repository at this point in the history

  5. Update a comment about the initial fade-in of the loading bar

    @robertknight
    robertknight committed May 4, 2021
    Configuration menu
    Copy the full SHA
    b5dff70 View commit details
    Browse the repository at this point in the history