Magento 2 Product detail page is not loading.

[5e48be49ecff7]

• Hi, 
  
  I upgrade the Magento version from 2.2 to 2.4 the product page is not loading completely. 
  the loading icon is showing on the page. Screenshot is attacehed 
  Can anybody help?
  
  Thanks in advance.

[5e48be49ecff7]

• 

[Gaurav_Jain02]

Hello @5e48be49ecff7 

You should check out this thread for the solution.

https://community.magento.com/t5/Magento-2-x-Version-Upgrades/Magento-2-2-6-to-2-3-2-white-product-p...

[5e48be49ecff7]

Hi, 

Thanks, But I'm using a different theme. which is ultimo. 
Can you please suggest me another way to fix it. 

Thanks,
Bilal

[LitExtension Expert]

Hi @5e48be49ecff7,

You need to change the file/folder ownership

sudo chown -R www-data:www-data

Please check what web server are you using. Apache: www-data:www-data, nginx: nginx:nginx

Hope this can help you! Let me know if you need further assistance.

________

If issue solved, Click Kudos & Accept as Solution.

[Joffy Jose]

issue is not coming display none or hide  in loader div

<div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">
    <div data-role="loader" class="loading-mask">
        <div class="loader">
            <img src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
                 alt="<?php /* @escapeNotVerified */ echo __('Loading...') ?>">
        </div>
    </div>
</div>
<!--Fix for jumping content. Loader must be the same size as gallery.-->
<script>
    var config = {
            "width": <?php /* @escapeNotVerified */ echo $width; ?>,
            "thumbheight": <?php /* @escapeNotVerified */ echo $thumbHeight ?: $thumbWidth; ?>,
            "navtype": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/navtype"); ?>",
            "height": <?php /* @escapeNotVerified */ echo $height; ?>
        },
        thumbBarHeight = 0,
        loader = document.querySelectorAll('[data-gallery-role="gallery-placeholder"] [data-role="loader"]')[0];

    if (config.navtype === 'horizontal') {
        thumbBarHeight = config.thumbheight;
    }

    loader.style.paddingBottom = ( config.height / config.width * 100) + "%";
</script>