Skip to content

Close Preload only when html in WebView completes rendering #244

@NicksonYap

Description

@NicksonYap

Hi,
I'm trying to make the WebView transition feel more native compared to a webbrowser

What I was thinking is to show a loading page while the WebView is still rendering

I've tried Preload and it seems to close once the .json has been loaded
this causes the Preload page to only show in a split second (flashes real quick)

But what about a loading page when the html in the WebView is still loading?

Code that I've tried:

{
  "$jason": {
    "head": {
      "title": "Web Container Native Transition",
      "actions": {
        "$load": {
          "type": "$set",
          "options": {
            "url": [{
              "{{#if $params && 'url' in $params}}": "{{$params.url}}"
            }, {
              "{{#else}}": "https://www.google.com"
            }]
          },
          "success": {
            "type": "$render"
          }
        },
        "navigate": {
          "type": "$href",
          "options": {
            "url": "file://native_transition.json",
            "options": {
              "url": "{{$jason.url}}"
            },
            "preload": {
              "style": {
                "background": "{{'#' + Math.round((0x1000000 + 0xffffff * Math.random())).toString(16).slice(1)}}"
              },
              "layers": [
                {
                  "type": "label",
                  "text": "Loading...",
                  "style": {
                    "top": "300",
                    "left": "0",
                    "width": "100%",
                    "height": "100",
                    "align": "center",
                    "color": "#ffffff",
                    "size": "12"
                  }
                }
              ]
            }
          }
        }
      },
      "templates": {
        "body": {
          "background": {
            "type": "html",
            "url": "{{$get.url}}",
            "action": {
              "trigger": "navigate"
            }
          }
        }
      }
    }
  }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions