Page MenuHomePhabricator

Wikistories section (stories and CTA) makes the article content jump down
Closed, ResolvedPublic

Assigned To
Authored By
SBisson
May 5 2022, 1:28 PM
Referenced Files
F35284219: Screen Recording 2022-06-28 at 4.28.01 PM.mov
Jun 28 2022, 3:32 PM
F35272961: image.png
Jun 24 2022, 10:28 PM
F35196598: gap.png
Jun 1 2022, 2:45 PM
F35196607: thumbnails.png
Jun 1 2022, 2:45 PM
F35196604: stories.png
Jun 1 2022, 2:45 PM
F35196601: cta.png
Jun 1 2022, 2:45 PM
F35190601: localhost_8080_wiki_Boat(Galaxy S III).png
May 30 2022, 3:48 PM
F35178197: Accent 50 70% scrim stories loaded.png
May 26 2022, 6:27 AM

Description

Background

When viewing an article, Wikistories take some time to load. When it appears at the top of the article, it pushed the content down by about 100px.

Improvement suggestions
Accent 50 70% scrim only story button.png (722×356 px, 94 KB)
  • Load create story button along with the article content.
Accent 50 70% scrim stories loading.png (722×356 px, 97 KB)
Accent 50 70% scrim stories loaded.png (722×356 px, 115 KB)
  • Load attached stories once article has been loaded.
  • Fix create story button position to left whether there are stories attached to an article or not.
  • Allow horizontal scroll to view attached stories.

Event Timeline

SBisson renamed this task from Wikistories section (stories and CTA) make the article content jump down to Wikistories section (stories and CTA) makes the article content jump down.May 13 2022, 1:10 PM

@SGautam_WMF I think we didn't load the CTA with the article originally because there is no extension point to add content right below the article title. The official "header" extension point will add it below the toolbar.

localhost_8080_wiki_Boat(Galaxy S III).png (1×720 px, 78 KB)

@SBisson will we have control over adjusting its margins/paddings?

@SBisson will we have control over adjusting its margins/paddings?

The margins/paddings of what?

SBisson triaged this task as Medium priority.
SBisson moved this task from Ready for Dev to Dev on the Inuka-Team (Kanban) board.

Change 801804 had a related patch set uploaded (by Sbisson; author: Sbisson):

[mediawiki/extensions/Wikistories@master] POC: Load discoveer section progressively

https://gerrit.wikimedia.org/r/801804

@SGautam_WMF I made a proof-of-concept in the patch above. This is how it goes:

1. At the same time as the article content, there's a margin-bottom on the title the same height as the Wikistories discover section2. When the Wikistories module is loaded, we add the CTA and remove the margin-bottom3. When the stories are loaded, we add them next to the CTA4. The stories thumbnails load when they can
gap.png (770×436 px, 101 KB)
cta.png (768×432 px, 103 KB)
stories.png (766×434 px, 117 KB)
thumbnails.png (766×430 px, 126 KB)

On a fast connection, this is all happening almost at the same time and it is not very different from whaat we have now but in all cases, there is no content shifting.

Thanks @SBisson, this margin block will work when an article has subtitle too? I am unable to find an example but I have seen articles where article's title come along with a subtitle.

Also, did you try this on slow 3G?

Thanks @SBisson, this margin block will work when an article has subtitle too? I am unable to find an example but I have seen articles where article's title come along with a subtitle.

We need to find an article with a subtitle to make sure the wikistories section doesn't show between the title and subtitle. That would be the change with or without the change proposed here.

Also, did you try this on slow 3G?

Yes, everything is slower but the sequence of events is the same outlined above.

Thanks @SBisson, this margin block will work when an article has subtitle too? I am unable to find an example but I have seen articles where article's title come along with a subtitle.

We need to find an article with a subtitle to make sure the wikistories section doesn't show between the title and subtitle. That would be the change with or without the change proposed here.

Make sense

@SGautam_WMF I can't find an article that shows a subtitle. Looking at the code, it's possible it's only used on special page, not articles. Anyways, this is actually independent from the loading sequence itself. Let me know what you think of the sequence I proposed above so we can move this task forward.

@SBisson we will add the Wikistories module once the entire article is loaded? by that I mean, images, tables, infobox, gallery? Also, I am guessing scrolling will be available to users while content is loading so there could be situations when they can scroll down to see rest of the article. We can proceed with the flow you have proposed as I will be able to provide more feedback when I try it.

@SBisson we will add the Wikistories module once the entire article is loaded?

Yes, the text of the article will all be there before the stories but the inline images may not be fully loaded yet. We have no control over this.

We can proceed with the flow you have proposed as I will be able to provide more feedback when I try it.

OK, I will try to get the patch merged so you can try it in beta and it can easily be reverted if we don't like it.

Change 801804 merged by jenkins-bot:

[mediawiki/extensions/Wikistories@master] Load discover section progressively

https://gerrit.wikimedia.org/r/801804

Testing

@SBisson
The text at the bottom of the page is still pushed down slightly when the "Create Wikistories" button appears.

image.png (1×1 px, 225 KB)

Testing

@SBisson
The text at the bottom of the page is still pushed down slightly[...]

I will investigate and try to fix it

@EUdoh-WMF I'm not seeing any jump visually or with the Performance Insights dev tools. Could you double-check and let me know what you are seeing in details?

Hi @SBisson, I slowed my network speed and placed my mouse pointer at a certain position to try and demonstrate this. I hope this video shows it!

@EUdoh-WMF the shift is caused by the change of styling of the line that says "Last edited 5 days ago...". This is caused by MobileFrontend and not us.

I see. Thanks for the explanation.