GridLayout pre-rendering with grey boxes - WinJS

Question

can't wait to get my first app in the Store! :) Unfortunately I'm encountering a few minor problems on the way to completion...

---

All my GridLayouts areas pre-render with grey boxes shifted to the right. [See Images below]

---

The content is loaded via XHR and the images are hosted on a web server.

When the grey boxes render, the images have loaded as well. I was expecting the images to load after the boxes rendered, as it happens on a regular webpage.

---

HTML

 <div class="fragment groupeditemspage">
    <header aria-label="Header content" role="banner">
        ...
    </header>
    <section role="separator">

    </section>
    <section aria-label="Main content" role="main" id="home-list-views">

        <div class="groupeditemslist win-selectionstylefilled" id="homeItems" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none', maxRows: 4 }"></div>

    </section>
</div>

CSS

.groupeditemspage section[role=main] {
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
    display: -ms-flexbox;
    -ms-flex-direction: row;

    height: 100%;
    overflow-x: auto;
    position: relative;
    width: 100%;
    z-index: 0;

}

#collection-list-view-container{
    column-fill: auto;
    column-gap: 15px;
    column-width: auto;

    margin-left: 120px;
    margin-top: 20px;

    width: auto;
    height: 80%;

    .win-listview{
        margin-top: 15px;
        height: 100%;
    }

    .win-surface{
        margin: 0px;
    }
}

MORE CSS

 .groupeditemspage .groupeditemslist .win-horizontal.win-viewport .win-surface {
            margin-bottom: 60px;
            margin-left: 45px;
            margin-right: 115px;
            //margin-top: 128px;
            margin-top: 20px;
        }

        .groupeditemspage .groupeditemslist .win-groupheader {
            padding: 0;
        }

        /* Use grid and top level layout for truncation */
        .groupeditemspage .groupeditemslist .group-header {
            -ms-grid-columns: minmax(0, max-content) 7px max-content;
            -ms-grid-rows: max-content;
            display: -ms-inline-grid;
            line-height: 1.5;
        }

        /* Override default button styles */
        .groupeditemspage .groupeditemslist .group-header, .group-header:hover, .group-header:hover:active {
            background: transparent;
            border: 0;
            margin-bottom: 1px;
            margin-left: 5px;
            margin-right: 5px;
            margin-top: 1px;
            min-height: 0;
            padding: 0;
        }

            .groupeditemspage .groupeditemslist .group-header .group-title {
                display: inline-block;
            }

            .groupeditemspage .groupeditemslist .group-header .group-chevron {
                -ms-grid-column: 3;
                display: inline-block;
            }

                .groupeditemspage .groupeditemslist .group-header .group-chevron::before {
                    content: "\E26B";
                    font-family: 'Segoe UI Symbol';
                }

        .groupeditemspage .groupeditemslist{

            .win-item{
                box-shadow: 0px 0px 10px 3px #ddd;
            }

            .win-container {
               margin-bottom: 1px;
               margin-left: 1px;
               margin-right: 1px;
               margin-top: 1px;
            }
        }

        .groupeditemspage .groupeditemslist .item {
            -ms-grid-columns: 1fr;
            -ms-grid-rows: 1fr 90px;
            display: -ms-grid;
            height: 128px*2-2px;
            width: 128px*2-2px;

            border: 1px solid #ddd;



            .item-image{

            }

            &.product{
                //height: 128px-2px;
                //width: 128px-2px;
                height: 128px-2px-5px;
                width: 128px-2px-5px;

                -ms-grid-rows: 1fr 25px;

                .item-overlay{
                    -ms-grid-row: 2;
                    background: white;
                    text-align: center;
                    opaciy: 0.9;
                    span.icon-star{
                        color: orange;
                    }
                }
                .item-image{
                    -ms-grid-row: 1;
                    text-align: center;
                    //height: 100%;
                    //-ms-grid-row-span: 1;
                    img{
                        height: 140px;
                        width: 140px;
                    }
                }
            }
            &.category{
                //height: 128px-2px;
                //width: 128px*2-2px;
                height: 128px-2px;
                width: 256px-2px;

                -ms-grid-rows: 1fr 40px;
                .item-overlay{
                    //display: none;
                    background: #111;
                    color: white;
                    //font-weight: bold;
                    //font-size: 24px;
                    width: 100%;

                    opacity: 0.95;

                    padding: 8px 15px;
                    h4{
                        width: 100%;
                        font-size: 18px;
                    }
                }
                .item-image{
                    -ms-grid-row-span: 2;
                }
            }
            &.collection{
                //-ms-grid-columns: 1fr;
                -ms-grid-rows: 1fr 40px;
                //display: -ms-grid;
                //height: 128px-2px;
                //width: 128px*2-2px;

                height: 165px-2px;
                width: 220px-2px;

                &.big{
                    //height: 128px*2-2px;
                    //width: 128px*4-4px+20px;
                    height: 165px*2-2px+2px;
                    width: 220px*2-2px+2px;
                    -ms-grid-rows: 1fr 50px;

                    .item-overlay{
                        h4{
                            font-size: 26px;
                        }
                        h6{
                            font-size: 18px;
                        }
                    }
                }

                .item-overlay{
                    -display: none;
                    background: #111;
                    color: white;
                    //font-weight: bold;
                    //font-size: 24px;
                    width: 100%;

                    opacity: 0.95;

                    padding: 5px 15px;
                    h4{
                        width: 100%;
                        font-size: 18px;
                    }
                }
                .item-image{
                    -ms-grid-row-span: 2;
                }
            }
        }



            .groupeditemspage .groupeditemslist .item .item-overlay {
                //-ms-grid-row: 2;
                //-ms-grid-rows: 1fr 21px;
                //display: -ms-grid;
                //padding: 6px 15px 2px 15px;
            }

                .groupeditemspage .groupeditemslist .item .item-overlay .item-title {
                    //-ms-grid-row: 1;
                    overflow: hidden;
                    width: 220px;
                }

                .groupeditemspage .groupeditemslist .item .item-overlay .item-subtitle {
                    //-ms-grid-row: 2;
                    width: 220px;
                }


        .groupeditemspage .groupeditemslist .largeitemtemplate .item{
            width: 500px + 10px;
            height: 500px + 10px;
        }

        /* Generic styling */
    .groupeditemspage .groupeditemslist .item-overlay {
        -ms-grid-row: 2;
    }
    .groupeditemspage .groupeditemslist .item-overlay .item-description {
        visibility:collapse;
    }

JS

listView.layout = new ui.GridLayout({ groupInfo: groupInfo, groupHeaderPosition: "top" });
listView.itemDataSource = Data.items.dataSource;
listView.groupDataSource = Data.groups.dataSource;

---

Ebay app does this quite well:

1. Boxes render almost immediately, no grey boxes.
2. Images load.

---

Any idea what could be happening?

Thanks a lot! :) Hopefully I'll be up and running with my first app very soon!

Answer 1

This is the ListViews default "back drop" rendering that it places to enhance perceived performance, by rendering placeholders even before it knows how much data it is rendering.

You can customize it with backdropColor and disable it with disableBackdrop