Skip to content

Commit

Permalink
Place redirect smoothing (#4732)
Browse files Browse the repository at this point in the history
## Description

This PR updates aspects of the flow, layout and styling of the redirect
process for when a the search results give a "place overview" and the
svSource is "unfulfilled", with the goal of removing redirect flashes
and FOUCs.

The following changes were made to make the process visually smoother:
* In the event that the a page is poised to redirect (i.e., the above
criteria is true), the loading state is maintained. This prevents the
intermediate "Place Overview" page from displaying just before the
redirect, removing the first flash.
* In the place page that follows (for example, `place/country/CAN`), the
layout was adjusted so that a FOUC was removed while the content was
being loaded in.
* The page overview now fades in when it loads, softening the appearance
of the load.
* A small spinner was added onto this page to give more of a loading
sense.

---------

Co-authored-by: Pablo Noel <pablo@next-solutions.ca>
nick-next and pablonoel authored Nov 15, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent d571bbc commit c7dc534
Showing 5 changed files with 44 additions and 7 deletions.
6 changes: 5 additions & 1 deletion server/templates/place.html
Original file line number Diff line number Diff line change
@@ -69,7 +69,11 @@ <h3 id="locale" data-lc="{{ locale }}"></h3>
<div id="place-summary" class="row-col place-summary-container">{{ place_summary }}</div>
<div id="main-pane" class="row"></div>
{# TRANSLATORS: A message shown on the page while the content is loading. #}
<div id="page-loading" className="mt-4">{% trans %}Loading...{% endtrans %}</div>
<div id="page-loading" className="mt-4">
{# SVG: Material Icon: Progress Activity, Source: https://fonts.google.com/icons #}
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-155.5t86-127Q252-817 325-848.5T480-880q17 0 28.5 11.5T520-840q0 17-11.5 28.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160q133 0 226.5-93.5T800-480q0-17 11.5-28.5T840-520q17 0 28.5 11.5T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127 86T480-80Z"/></svg>
<p>{% trans %}Loading{% endtrans %}</p>
</div>
</div>
</div>
</div>
21 changes: 21 additions & 0 deletions static/css/place/place.scss
Original file line number Diff line number Diff line change
@@ -76,3 +76,24 @@ h3 {
#main-pane .button-dc {
margin-top: -3px;
}

#page-loading {
display: flex;
align-items: center;
gap: 8px;
svg {
animation: rotating 2s linear infinite;
}
p {
margin: 3px 0 0 0;
}
}

@keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
9 changes: 8 additions & 1 deletion static/css/place/place_page.scss
Original file line number Diff line number Diff line change
@@ -248,10 +248,17 @@ $chart-border: 0.5px solid #dee2e6;
padding: 0.25rem;
}

#main-pane {
opacity: 0;
transition: opacity 0.7s ease-in-out;
}

#sidebar-outer {
border-top: $vertical-section-border;
margin-top: $vertical-section-margin;
padding-top: $vertical-section-margin;
opacity: 0;
transition: opacity 0.7s ease-in-out;

@include media-breakpoint-up(lg) {
border: none;
@@ -269,7 +276,7 @@ $chart-border: 0.5px solid #dee2e6;
#sidebar-region {
padding-top: 15px;
position: relative;
transition: transform 300ms linear;
transition: transform 300ms ease-in-out;
}

#sidebar-region.fixed {
8 changes: 6 additions & 2 deletions static/js/apps/explore/app.tsx
Original file line number Diff line number Diff line change
@@ -211,12 +211,14 @@ export function App(props: { isDemo: boolean }): JSX.Element {
sessionId: "session" in fulfillData ? fulfillData["session"]["id"] : "",
svSource: fulfillData["svSource"],
};
let isPendingRedirect = false;
if (
pageMetadata &&
pageMetadata.pageConfig &&
pageMetadata.pageConfig.categories
) {
if (shouldSkipPlaceOverview(pageMetadata)) {
isPendingRedirect = shouldSkipPlaceOverview(pageMetadata);
if (isPendingRedirect) {
const placeDcid = pageMetadata.place.dcid;
const url = `/place/${placeDcid}`;
window.location.replace(url);
@@ -262,7 +264,9 @@ export function App(props: { isDemo: boolean }): JSX.Element {
pastSourceContext: fulfillData["pastSourceContext"],
sessionId: pageMetadata.sessionId,
});
setLoadingStatus(LoadingStatus.SUCCESS);
setLoadingStatus(
isPendingRedirect ? LoadingStatus.LOADING : LoadingStatus.SUCCESS
);
}

function handleHashChange(): void {
7 changes: 4 additions & 3 deletions static/js/place/place.ts
Original file line number Diff line number Diff line change
@@ -190,7 +190,11 @@ function renderPage(): void {
return;
}
const loadingElem = document.getElementById("page-loading");
const sidebarElem = document.getElementById("sidebar-outer");
const mainPaneElem = document.getElementById("main-pane");
loadingElem.style.display = "none";
sidebarElem.style.opacity = "1";
mainPaneElem.style.opacity = "1";
const data: PageData = landingPageData;
const isUsaPlace = isPlaceInUsa(dcid, data.parentPlaces);

@@ -205,9 +209,6 @@ function renderPage(): void {
}),
document.getElementById("nl-search-bar")
);
} else {
// when NL search bar is hidden, need to adjust spacing
document.getElementById("nl-search-bar").style.height = "2rem";
}

ReactDOM.render(

0 comments on commit c7dc534

Please sign in to comment.