s3 bucket loads content, cloudfront shows not found then loads content Gatsby project

I have a gatsby project, I'm hosting the static content on S3 + cloudfont + route53
my S3 loads the content properly of any post or page bucket example http://londonfilmpremieres.com.s3-website.eu-west-2.amazonaws.com/matilda/.

but my cloudfront which is what I'm pointing to my domain always loads not found and then loads the content https://d1h745biu42n4w.cloudfront.net/matilda/

did I miss some permissions?

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "S3BucketAccess",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:PutObject",
                "s3:GetObjectAcl",
                "s3:GetObject",
                "s3:DeleteObjectVersion",
                "s3:GetObjectVersionAcl",
                "s3:ListBucket",
                "s3:DeleteObject",
                "s3:PutObjectAcl",
                "s3:GetObjectVersion"
            ],
            "Resource": [
                "arn:aws:s3:::BUCKET_NAME/*",
                "arn:aws:s3:::BUCKET_NAME"
            ]
        }
    ]
}

or I need to do something else on my cloudfront I'm not really sure where the problem is .. or where to find it thanks in advance