feat(payment_link): add shimmer page before payment_link loads starts

[sahkal]

Type of Change

• Bugfix
• New feature
• Enhancement
• Refactoring
• Dependency updates
• Documentation
• CI/CD

Description

add shimmer page before payment_link loads starts

Additional Changes

• This PR modifies the API contract
• This PR modifies the database schema
• This PR modifies application configuration/environment variables

Motivation and Context

closes https://github.com/juspay/hyperswitch-cloud/issues/4483

How did you test it?

Do payment link create and look for shimmer before the script start downloading

curl --location 'http://localhost:8080/payments' \
--header 'Content-Type: application/json' \
--header 'Accept: application/json' \
--header 'api-key: dev_vuC3wt9p8qUzB9co6ve1J04rUoxZvrFaaHi2cJ4BDIJCIwnltnZLPQMSJGCyIdHJ' \
--data-raw '{
    "amount": 250,
    "currency": "USD",
    "confirm": false,
    "amount_to_capture": 250,
    "capture_method": "automatic",
    "capture_on": "2022-09-10T10:11:12Z",
    "customer_id": "StripeCustomer",
    "email": "abcdef123@gmail.com",
    "name": "John Doe",
    "phone": "999999999",
    "phone_country_code": "+65",
    "description": "Its my first payment request",
    "authentication_type": "three_ds",
    "return_url": "https://google.com",
    "setup_future_usage": "on_session",
    "browser_info": {
        "user_agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36",
        "accept_header": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8",
        "language": "nl-NL",
        "color_depth": 24,
        "screen_height": 723,
        "screen_width": 1536,
        "time_zone": 0,
        "java_enabled": true,
        "java_script_enabled": true,
        "ip_address": "127.0.0.1"
    },
    "routing": {
        "type": "single",
        "data": "nmi"
    },
    "statement_descriptor_name": "joseph",
    "statement_descriptor_suffix": "JS",
    "metadata": {
        "udf1": "value1",
        "new_customer": "true",
        "login_date": "2019-09-10T10:11:12Z"
    },
    "payment_link":true,
    "order_details": [
        {
            "product_name": "Tea",
            "quantity": 1,
            "amount": 110,
            "product_img_link": "https://thumbs.dreamstime.com/b/indian-tea-spices-masala-chai-33827904.jpg"
        },
        {
            "product_name": "Tea",
            "quantity": 20,
            "amount": 110,
            "product_img_link": "https://thumbs.dreamstime.com/b/indian-tea-spices-masala-chai-33827904.jpg"
        },
        {
            "product_name": "Tea",
            "quantity": 1,
            "amount": 110,
            "product_img_link": "https://thumbs.dreamstime.com/b/indian-tea-spices-masala-chai-33827904.jpg"
        }
    ],
    "billing": {
        "address": {
            "zip": "94122",
            "first_name": "sahkal",
            "last_name": "poddar"
        }
    }
}
'

shimmer :

loaded payment_link

Checklist

• I formatted the code cargo +nightly fmt --all
• I addressed lints thrown by cargo clippy
• I reviewed the submitted code
• I added unit tests for my changes where possible
• I added a CHANGELOG entry if applicable