2

I use dart-polymer package to create custom elements. I have noticed that there is some blinking during of page with the custom elements loading. This effect also is visible for the very simple ClickCounter app. Is there any way to avoid this vexing blinking?

The issue is good described in Wikipedia http://en.wikipedia.org/wiki/Flash_of_unstyled_content

The suggested solution from http://www.polymer-project.org/docs/polymer/styling.html#fouc-prevention does not work for the simple application (polymer: '0.10.0-pre.2')..

<html>
  <head>
    <title>Click Counter</title>

    <!-- import the click-counter -->
    <link rel="import" href="packages/polymer/polymer.html">
    <link rel="import" href="clickcounter.html">
    <script type="application/dart">export 'package:polymer/init.dart';</script>
    <script src="packages/browser/dart.js"></script>
  </head>
    <body unresolved>
    <h1>CC</h1>

    <p>Hello world from Dart!</p>

    <div id="sample_container_id">
      <click-counter count="5"></click-counter>
    </div>

  </body>
</html>

<polymer-element name="click-counter" attributes="count">
  <template>
    <style>
      div {
        font-size: 24pt;
        text-align: center;
        margin-top: 140px;
      }
      button {
        font-size: 24pt;
        margin-bottom: 20px;
      }
    </style>
    <div>
      <button on-click="{{increment}}">Click me</button><br>
      <span>(click count: {{count}})</span>
    </div>
  </template>
  <script type="application/dart" src="clickcounter.dart"></script>
</polymer-element>

import 'package:polymer/polymer.dart';

/**
 * A Polymer click counter element.
 */
@CustomTag('click-counter')
class ClickCounter extends PolymerElement {
  @published int count = 0;

  ClickCounter.created() : super.created() {
  }

  void increment() {
    count++;
  }
}

see also the created issue in code.google.com https://code.google.com/p/dart/issues/detail?id=17498

Roman
  • 2,145
  • 4
  • 26
  • 33
  • Which browser (Dartium, Chrome, Firefox), which Dart version which Polymer version? Is this sample app somewhere online where this can be verified? I work a lot with Polymer but I have no idea what you mean. – Günter Zöchbauer Mar 14 '14 at 17:30
  • Environment: Dartium for the dart code and the lastest FF for the compiled js-code, the latest dev version (1.2.0-dev.5.15) of dart, the latest Polymer (0.10.0-pre.2). You can create Web application (using the polymer library) with the sample content in DartEditor and launch it in Dartium. Even in this example can be seen a flashing of custom element when page loading. "blinking" means the delay during of creating a custom element. A static DOM loads instantly. – Roman Mar 14 '14 at 17:55
  • I think I know what you mean. – Günter Zöchbauer Mar 14 '14 at 18:03
  • 1
    I think this is because Dart can only kick in after the DOM has been loaded. The only idea I have is using the http://www.polymer-project.org/docs/polymer/styling.html#fouc-prevention – Günter Zöchbauer Mar 14 '14 at 18:08
  • Yes, it is a good temporary solution, but the speed of page loading will be the same. It works fine for ClickCounter-like applications :) – Roman Mar 14 '14 at 18:20
  • Unfortunately, "unresolved" attribute to body does not work.. – Roman Mar 15 '14 at 07:50
  • 1
    What I have seen the class names used in Dart seem to be different. There was a change recently. Previously this was done on each component separately and now it is done on the body element. Probably the class names have changed recently too and PolymerDart is not yet up to date. What I have seen popping up while loading the page very briefly in Dartium DevTools was 'polymer-unveil' (wasn't shown long enough to be sure). I'll examine the source code and update my answer. – Günter Zöchbauer Mar 15 '14 at 08:57

1 Answers1

1

Polymer 0.9.5
The class names to use are polymer-veiled (hidden) and polymer-unveil (during unveil transition) If it is different than in Polymer.js it is probably subject of change but as of PolymerDart 0.9.0 it should work.

The relevant code is in packages/polymer/src/boot.dart.

Polymer 0.10.0
Polymer 0.10.0-pre.1 uses already the unresolved attribute like explained here
Polymer - Styling reference - FOUC prevention

You need to add a version constraint in pubspec.yaml to get the development version like
polymer: ">=0.10.0-pre.1"

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Thanks! But I already use `polymer: '>=0.10.0-pre.0 <0.11.0'` and `unresolved` does not work for the code above.. – Roman Mar 15 '14 at 10:25
  • 1
    When I add the `unresolved` attribute to body it gets removed but I also thing that it is not really working. I couldn't find a way to utilize this to make page display look like a smoth transition. I starred the bug. – Günter Zöchbauer Mar 15 '14 at 13:28