Place redirect smoothing #4732
Merged
Place redirect smoothing #4732
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
dwnoble
reviewed
Nov 13, 2024
server/templates/place.html
Outdated
| @@ -69,7 +69,7 @@ <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">{% trans %}<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>Loading</p>{% endtrans %}</div> | |||
There was a problem hiding this comment.
Just wrap the {% trans %} tag around the actual text, in this case the word "Loading"
There was a problem hiding this comment.
Can you add comment describing the SVG and give a source reference where it came from?
There was a problem hiding this comment.
Updated and ready for re-review!
For the SVG: we've used an SVG rather than the font as part of a move away from using the font-based Material icons, as the font-based icons are prone to content flashes while the font loads.
One of the next PRs coming will replace the inline SVGs (including this one) as well as remaining font-based material icons with an organized set of icon components.
nick-next
force-pushed
the
place-redirect-fixes
branch
from
462ba7f to
65bcba9
Compare
gmechali
approved these changes
Nov 14, 2024
…ntent immediately before the redirect invokes).
…on is only called once, and it is only called in a context where we are sure that the pageMetaData exists.
…y brackets the text it is translating.
nick-next
force-pushed
the
place-redirect-fixes
branch
from
65bcba9 to
c1dae81
Compare
gmechali
pushed a commit
to gmechali/website
that referenced
this pull request
Nov 21, 2024
## 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 <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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:
place/country/CAN), the layout was adjusted so that a FOUC was removed while the content was being loaded in.