feat: load limited-time offer signals on the client side #14897
Conversation
#1428 Bundle Size — 8.98MiB (+0.33%).46fc278(current) vs 81674c0 main#1427(baseline) Warning Bundle contains 14 duplicate packages – View duplicate packages Bundle metrics
|
| Current #1428 |
Baseline #1427 |
|
|---|---|---|
 Initial JS |
3.66MiB(+0.1%) |
3.65MiB |
 Initial CSS |
0B |
0B |
 Cache Invalidation |
75.85% |
39.33% |
| Chunks |
103 |
103 |
| Assets |
106 |
106 |
| Modules |
5842(+0.1%) |
5836 |
| Duplicate Modules |
529 |
529 |
| Duplicate Code |
4.02% |
4.02% |
| Packages |
266 |
266 |
| Duplicate Packages |
13 |
13 |
Bundle size by type 1 change 1 regression
| Current #1428 |
Baseline #1427 |
|
|---|---|---|
| JS |
8.84MiB (+0.33%) |
8.81MiB |
| Other |
143.36KiB |
143.36KiB |
Bundle analysis report Branch review-app-client-side-collector... Project dashboard
Generated by RelativeCI Documentation Report issue
| ) | ||
| } | ||
|
|
||
| const SaleMessageFragmentContainer = createFragmentContainer(SaleMessage, { |
There was a problem hiding this comment.
#nonblocking and harmless, but would def encourage all new relay code to be written using hooks:
const data = useFragment(...)Its a bit nicer from an import perspective too; can do import { SaleMessage } from vs having to mention fragment containers.
There was a problem hiding this comment.
Good to know! I was confused about the best practices doc that recommends relay containers.
There was a problem hiding this comment.
Ah, that's quite updated. I'll update that.
| signal_label: artwork.collectorSignals | ||
| ? getSignalLabel(artwork.collectorSignals) | ||
| : "", | ||
| signal_label: getSignalLabel(signals?.[artwork.internalID] ?? []), |
There was a problem hiding this comment.
Would this populate the data when the PrimaryLabelLine component is not rendered with this ArtworkSidebarCommercialButtons component? I think we might still need a way to use the backend sourced signals. But I could be missing something here.
rquartararo
force-pushed
the
review-app-client-side-collector-signals
branch
from
601b617 to
cd42dab
Compare
This depends on MP change that removes partner offers from primary labels. Primary label should only consist of unauthenticated data.
Now we have to consider partner offer (that's loaded on the client side) when displaying "increased interest" and "curtors' pick" badges (that can be loaded on the server and cached), it may visually look better moving the limited-time offer back to the first line, with the badges. While there will be some content shift, we can preserve the original collector signals design (vs. partially porting over the app design).
starsirius
force-pushed
the
review-app-client-side-collector-signals
branch
from
9195398 to
46fc278
Compare
starsirius
changed the title
|
OK @rquartararo as we agreed on, the last commit put the clientside behavior behind a feature flag. I tested it locally (see below) and it seems to behave correctly. If this looks good to you, I'm going to merge this PR and we can create a separate PR for your tracking changes. And then we'll QA as a group next week! 🎉 Note that I didn't guard everything behind the feature flag since I think some visual improvement (such as fixing height) is worth adding in.
|
Yeah, my original plan was exactly that, and then the change grows to require more tracking changes (which will be included in a separate PR) and needs to be coordinated with the upstream changes. Plus the wide surface areas this change will touch, so I want to roll it out in a more manageable/less risky way. |
The type of this PR is: Feat
This PR solves EMI-2161
Description
In the previous attempt, we tried a few design options to display the limited-time offer signals on the client-side. We then realized the signal has to be considered together with other badge signals (i.e. "increased interest" and "curators' pick") because we only want to display at most one. So we decided to switch back to the original signals design and let client-side loaded signals, if any, dynamically replace server-side rendered content. We now think it's acceptable to have content shift for this particular data which is relatively lower volume.
This is an example that the client-side loaded limited-time offer signal replaces an increased interest badge in-place. We can see the offered price also replaces the listed price shortly after page loads, as well as the timer and save state pops in.
Recording
This is an example when without other badges, the limited-time offer badge is inserted which causes some content shift.
Recording
cc @artsy/emerald-devs