Image thumbnail generation (on S3/Cloudfront integration) returns blank when first generated
Got the solution through Craft support, as well as this similar question: Image Transforms - Image not processed until second page refresh

In summary, use the generateTransformsBeforePageLoad settings in Craft CMS.

e.g.
project>config>general.php

&lt;?php
/**
 * General Configuration
 *
 * All of your system's general configuration settings go in here. You can see a
 * list of the available settings in vendor/craftcms/cms/src/config/GeneralConfig.php.
 *
 * @see craft\config\GeneralConfig
 */

return [
    // Global settings
    '*' =&gt; [
        // Default Week Start Day (0 = Sunday, 1 = Monday...)
        'defaultWeekStartDay'  =&gt; 0,

    // Enable CSRF Protection (recommended)
    'enableCsrfProtection' =&gt; true,

    // Whether generated URLs should omit "index.php"
    'omitScriptNameInUrls' =&gt; true,

    // Image variant be created on Asset save (aka BeforePageLoad)
    'generateTransformsBeforePageLoad' =&gt; true,

    // The secure key Craft will use for hashing and encrypting data
    'securityKey'                      =&gt; getenv('SECURITY_KEY'),
],


To set that in specific environment, e.g. in Live only, copy and paste 

'generateTransformsBeforePageLoad' => true, into the desired environment

e.g.

// Live environment settings
    'live' =&gt; [
        'devMode' =&gt; false,
        'generateTransformsBeforePageLoad' =&gt; true,
        'enableTemplateCaching' =&gt; true,
        'allowAutoUpdates' =&gt; false,
    ],