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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
58d3b22
Show loading spinner while ViaHTML iframe is loading
robertknight Apr 28, 2021
822ff19
Send `metadatachange` message to parent frame in PDF viewer
robertknight Apr 29, 2021
f6d98a9
Tweak the loading spinner animation
robertknight Apr 29, 2021
240d3bd
Replace loading spinner with bar across top of screen
robertknight May 4, 2021
b5dff70
Update a comment about the initial fade-in of the loading bar
robertknight May 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions via/templates/pdf_viewer.html.jinja2
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,25 @@

// URL of the Hypothesis client's boot script.
window.CLIENT_EMBED_URL = {{ client_embed_url | tojson }};

// When this PDF is hosted inside an iframe, notify the parent frame of
// the PDF's metadata. ViaHTML sends the same message for HTML documents.
//
// The PDF filename is used as a title because that is immediately available
// before the PDF has loaded.
if (window.parent !== window) {
const pdfURL = new URL(window.PDF_URL);
const pathSegments = pdfURL.pathname.split('/').filter(s => s !== '');
const filename = pathSegments.length > 0 ? pathSegments[pathSegments.length - 1] : pdfURL.hostname;

window.parent.postMessage({
type: 'metadatachange',
metadata: {
location: pdfURL.href,
title: filename
},
}, '*');
}
</script>

<script src="{{ static_url("via:static/js/pdfjs-init.min.js") }}"></script>
Expand Down
98 changes: 98 additions & 0 deletions via/templates/proxy.html.jinja2
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,77 @@
margin: 0;
padding: 0;
}

:root {
--color-brand: #bd1c2b;
}

.loading-bar {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
height: 5px;
background-color: var(--color-brand);

/* Loading bar is initially at 0% progress. */
width: 0px;
}

/* Increase loading "progress" once we decide to show the loading indicator.
Not an accurate representation, but it looks good.
*/
.loading-bar.is-loading {
animation: loading-bar-begin;
animation-duration: .3s;
animation-fill-mode: forwards;
}

@keyframes loading-bar-begin {
from {
width: 0%;
opacity: 0.0;
}

/* Same as start state of `loading-bar-finish` animation */
to {
width: 20%;
opacity: 1.0;
}
}

/* Once the content has loaded, set progress to 100% and then fade out the
progress bar.
*/
.loading-bar.is-done {
animation: loading-bar-finish;
animation-duration: 1s;
Copy link
Member Author

Choose a reason for hiding this comment

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

The animation is not actually 1s long as it reaches the final state at 70%. Using 1s makes each 10% of the animation take 100ms, which is convenient.

animation-fill-mode: forwards;
}

@keyframes loading-bar-finish {
/* Same as end state of `loading-bar-begin` animation */
0% {
width: 20%;
opacity: 1.0;
}

20% {
width: 100%;
opacity: 1.0;
}

70% {
width: 100%;
opacity: 0.0;
}

100% {
width: 100%;
opacity: 0.0;
}
}
</style>

<script>
Expand All @@ -47,6 +118,8 @@
// metadata etc. in the current frame.
window.addEventListener('message', event => {
const contentFrame = document.querySelector('.js-content-frame');
const loadingIndicator = document.querySelector('.js-loading-indicator');

if (event.source !== contentFrame.contentWindow) {
return;
}
Expand All @@ -57,12 +130,37 @@
}

if (message.type === 'metadatachange') {
// Treat the first `metadatachange` message as a hint that the iframe is
// done loading. This event is sent in response to `DOMContentLoaded` within the
// ViaHTML iframe, so sub-resources on the page may still be loading.
loadingIndicator.classList.add('is-done');

document.title = `Via: ${message.metadata.title}`;
}
});
</script>
</head>
<body>
<iframe class="js-content-frame proxied-content-iframe" src={{ src }}></iframe>

{# Loading indicator.

This is needed mainly in Safari where there is no indication that anything
is loading once the main frame has loaded. Chrome and Safari continue to
display the tab in a loading state until the iframe has finished loading.
#}
<div class="js-loading-indicator loading-bar">
<script>
/**
* Show the loading indicator after a short delay. The delay avoids showing
* the "loading started" state if the content loads very quickly, although
* the loading bar will still briefly fade in and out.
*/
function showLoadingIndicator() {
const loadingIndicator = document.querySelector('.js-loading-indicator');
setTimeout(() => loadingIndicator.classList.add('is-loading'), 500);
}
showLoadingIndicator();
</script>
</body>
</html>