Product gallery jumps while loading

[ihor-sviziev]

It seems like after #27871 we have a bit jumpy gallery again. My investigation shown that it's happening because of not hiding the thumbnails below the big image.

/CC @krzksz

Preconditions (*)

Steps to reproduce (*)

1. Open frontend in chrome, open developer tools
2. In the "source tab" set a breakpoint on the following line:

   magento2/lib/web/mage/gallery/gallery.js

   Line 307 in 15860ab

   $fotoramaStage.css('position', 'absolute');

3. refresh the page
4. When the script will stop on breakpoint switch to the elements tab and find the .fotorama-item item

Expected result (*)

1. There should be no jumps during gallery load

Actual result (*)

1. fotorama-items eats some space that causes not expected layout shifts:
   Dev tools:
   
   Desktop:
   
   Mobile:
   

Echo.Fit.Compression.Short.-.Google.Chrome.2021-03-01.16-04-55.mp4

---

Please provide Severity assessment for the Issue as Reporter. This information will help during Confirmation and Issue triage processes.

• Severity: S0 - Affects critical data or functionality and leaves users without workaround.
• Severity: S1 - Affects critical data or functionality and forces users to employ a workaround.
• Severity: S2 - Affects non-critical data or functionality and forces users to employ a workaround.
• Severity: S3 - Affects non-critical data or functionality and does not force users to employ a workaround.
• Severity: S4 - Affects aesthetics, professional look and feel, “quality” or “usability”.

[m2-assistant]

Hi @ihor-sviziev. Thank you for your report.
To help us process this issue please make sure that you provided the following information:

• Summary of the issue
• Information on your environment
• Steps to reproduce
• Expected and actual results

Please make sure that the issue is reproducible on the vanilla Magento instance following Steps to reproduce. To deploy vanilla Magento instance on our environment, please, add a comment to the issue:

@magento give me 2.4-develop instance - upcoming 2.4.x release

For more details, please, review the Magento Contributor Assistant documentation.

Please, add a comment to assign the issue: @magento I am working on this

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

⚠️ According to the Magento Contribution requirements, all issues must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting.

🕙 You can find the schedule on the Magento Community Calendar page.

📞 The triage of issues happens in the queue order. If you want to speed up the delivery of your contribution, please join the Community Contributions Triage session to discuss the appropriate ticket.

🎥 You can find the recording of the previous Community Contributions Triage on the Magento Youtube Channel

✏️ Feel free to post questions/proposals/feedback related to the Community Contributions Triage process to the corresponding Slack Channel

[ihor-sviziev]

@magento give me 2.4-develop instance

[magento-deployment-service]

Hi @ihor-sviziev. Thank you for your request. I'm working on Magento instance for you.

[magento-deployment-service]

Hi @ihor-sviziev, here is your Magento Instance: https://0590065bebcb18e5c5923653b97612d8-2-4-develop.instances.magento-community.engineering
Admin access: https://0590065bebcb18e5c5923653b97612d8-2-4-develop.instances.magento-community.engineering/admin_7d9c
Login: 9d3c1461
Password: 8e713576927c

[Quazz]

Personally I've replaced the function with

        initGallery: function () {
            var breakpoints = {},
                settings = this.settings,
                config = this.config,
                tpl = template(galleryTpl, {
                    next: $t('Next'),
                    previous: $t('Previous')
                }),
                mainImageIndex,
                $element = settings.$element,
                $fotoramaElement;

            if (settings.breakpoints) {
                _.each(_.values(settings.breakpoints), function (breakpoint) {
                    var conditions;

                    _.each(_.pairs(breakpoint.conditions), function (pair) {
                        conditions = conditions ? conditions + ' and (' + pair[0] + ': ' + pair[1] + ')' :
                        '(' + pair[0] + ': ' + pair[1] + ')';
                    });
                    breakpoints[conditions] = breakpoint.options;
                });
                settings.breakpoints = breakpoints;
            }

            _.extend(config, config.options,
                {
                    options: undefined,
                    click: false,
                    breakpoints: null
                }
            );
            settings.currentConfig = config;

            $element
                .css('min-height', settings.$element.height())
                .append(tpl);

            $fotoramaElement = $element.find('[data-gallery-role="gallery"]');

            $fotoramaElement.fotorama(config);
            $fotoramaElement.hide();
            $element.find('.gallery-placeholder__image').remove();
            $element
                .removeClass('_block-content-loading')
                .css('min-height', '');
            $fotoramaElement.show();

            settings.$elementF = $fotoramaElement;
            settings.fotoramaApi = $fotoramaElement.data('fotorama');

            $.extend(true, config, this.startConfig);

            mainImageIndex = getMainImageIndex(config.data);

            if (mainImageIndex) {
                this.settings.fotoramaApi.show({
                    index: mainImageIndex,
                    time: 0
                });
            }
        }

I found the fotoramaStage troublesome like you did and the f:load function seems unreliable (causing jumps as well)

Since the slowest part is loading the gallery, hiding the element, removing placeholder, then showing the element seemed to be the most reliable answer. I tried other variations, trying to make use of the fotorama f:load event, but it never seemed to produce the desired results in a reliable fashion.

[ihor-sviziev]

@Quazz, your solution will probably cause gallery blinking and potentially add Layout Shift, making worse Google Pagespeed Results.

[ihor-sviziev]

The solution from this PR Showing white close to 0 layout shift

…

On Fri, 9 Apr 2021 at 10:48, Quazz ***@***.***> wrote: @Quazz <https://github.com/Quazz>, your solution will probably cause gallery blinking and potentially add Layout Shift, making worse Google Pagespeed Results. There is a slight blinking (followed swiftly by ajax spinner), but 0 layout shift. I care less about that slight blinking than about the layout shift, but if someone has a solution that fixes both that would be ideal. — You are receiving this because you were assigned. Reply to this email directly, view it on GitHub <#32315 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAOJOUKXPONOE6M4CGGUTUTTH2WLVANCNFSM4YMSB3XA> .

[m2-assistant]

Hi @engcom-Dash. Thank you for working on this issue.
In order to make sure that issue has enough information and ready for development, please read and check the following instruction: 👇

• 1. Verify that issue has all the required information. (Preconditions, Steps to reproduce, Expected result, Actual result).
• 2. Verify that issue has a meaningful description and provides enough information to reproduce the issue.
• 3. Add Area: XXXXX label to the ticket, indicating the functional areas it may be related to.
• 4. Verify that the issue is reproducible on 2.4-develop branch
     Details

     - Add the comment @magento give me 2.4-develop instance to deploy test instance on Magento infrastructure.
     - If the issue is reproducible on 2.4-develop branch, please, add the label Reproduced on 2.4.x.
     - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and stop verification process here!

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[engcom-Dash]

@magento give me 2.4-develop instance

[magento-deployment-service]

Hi @engcom-Dash. Thank you for your request. I'm working on Magento instance for you.

[magento-deployment-service]

Hi @engcom-Dash, here is your Magento Instance: https://99e89c12840cc34c7b33da75188db8de.instances-prod.magento-community.engineering
Admin access: https://99e89c12840cc34c7b33da75188db8de.instances-prod.magento-community.engineering/admin_7765
Login: 00cbf2d3
Password: e336db90f3cd

[engcom-Dash]

Hi @ihor-sviziev

Thanks for reporting and collaboration.

We have verified the issue in magento 2.4 dev instance but we are not seeing the lines $fotoramaStage.css('position', 'absolute'); in line 307 on source tab.

Can you please share the detailed steps to reproduce inorder for us to test the issue.

Please refer the attached screenshots and let us know if we missed anything.

[ihor-sviziev]

These changes were already merged in another pull request #33265 (comment)