JSFiddle - React, Tailwind, and code Playground

CSS

/* For sample only: Apply fixed 1080p body sizing/scaling */
body {
    overflow: visible !important;
    width: 1920px !important;
    height: 1080px !important;
    transform: scale3d(0.3, 0.3, 1);
    transform-origin: 0 0;
    -webkit-transform: scale3d(0.3, 0.3, 1);
    -webkit-transform-origin: 0 0;
    -moz-transform: scale3d(0.3, 0.3, 1);
    -moz-transform-origin: 0 0;
    -ms-transform: scale3d(0.3, 0.3, 1);
    -ms-transform-origin: 0 0;
    -o-transform: scale3d(0.3, 0.3, 1);
    -o-transform-origin: 0 0;
}

JavaScript

// +------------------------------------------------+
// | Step 11. Add a loading spinner to search panel |
// +------------------------------------------------+

// source/views/views.js ========================================================

var kind = require('enyo/kind'),
    Panels = require('moonstone/Panels'),
		Panel = require('moonstone/Panel'),
    DataGridList = require('moonstone/DataGridList'),
    GridListImageItem = require('moonstone/GridListImageItem'),
    Collection = require('enyo/Collection'),
    Spinner = require('moonstone/Spinner');

var SearchPanel = kind({
  name: 'SearchPanel',
  kind: Panel,
  title: 'Search Flickr',
  titleBelow: 'Enter search term above',
  headerOptions: {inputMode: true, dismissOnEnter: true},
  headerComponents: [
    {kind: Spinner, content: 'Loading...', name: 'spinner'}
  ],
  handlers: {
    onInputHeaderChange: 'search'
  },
  components: [
    {kind: DataGridList, fit: true, name: 'resultList', minWidth: 250, minHeight: 300, components: [
      {kind: GridListImageItem, imageSizing: 'cover', useSubCaption: false, centered: false, bindings: [
        {from: 'model.title', to: 'caption'},
        {from: 'model.thumbnail', to: 'source'}
      ]}
    ]}
  ],
  bindings: [
  	{from: 'photos', to: '$.resultList.collection', transform: function(value) {
      console.log("bnjkn");
      return this.photos;
    }},
    {from: 'photos.status', to:'$.spinner.showing', transform: function(value) {
      console.log(this.photos.status);
    	console.log(this.photos);
      console.log(this.photos.isBusy());
      return this.photos.isBusy();
    }}
  ],
  create: function() {
    this.inherited(arguments);
    this.set('photos', new SearchCollection());
  },
  search: function(sender, ev) {
    this.$.resultList.collection.set('searchText', ev.originator.get('value'));
  }
});

var MainView = kind({
  name: 'MainView',
  classes: 'moon enyo-fit',
  components: [
    {kind: Panels, classes: 'enyo-fit', pattern:...