Try pre-compiled skin

index.html

@@ -12,6 +12,8 @@
     <meta property="og:url" content="https://webamp.org" />
     <meta property="og:image" content="https://webamp.org<%= require('./images/preview.png') %>" />
     <link rel='stylesheet' type='text/css' href="<%= require('!file-loader?name=[path][name]-[hash].[ext]!./css/page.css') %>" />
+    <!-- Some fancy attributes here to ensure we don't block rendering the page -->
+    <link rel='preload' type='text/css' href="<%= require('!file-loader?name=[path][name]-[hash].[ext]!./css/base-skin.css') %>" as="style" onload="this.onload=null;this.rel='stylesheet'"/>
     <link rel="shortcut icon" sizes="16x16 32x32" href="<%= require('./images/favicon.ico') %>">
 
     <!-- See https://goo.gl/OOhYW5 -->

js/components/PlaylistWindow/PlaylistShade.js

@@ -90,12 +90,10 @@ const mapDispatchToProps = dispatch => ({
 const mapStateToProps = state => {
   const {
     windows: { focused },
-    display: { skinPlaylistStyle },
     media: { length }
   } = state;
   return {
     focused,
-    skinPlaylistStyle,
     playlistSize: getWindowSize(state, "playlist"),
     trackOrder: getOrderedTracks(state),
     length,

js/components/PlaylistWindow/TrackCell.js

@@ -7,7 +7,7 @@ import {
   SHIFT_CLICKED_TRACK,
   PLAY_TRACK
 } from "../../actionTypes";
-import { getCurrentTrackId } from "../../selectors";
+import { getCurrentTrackId, getSkinPlaylistStyle } from "../../selectors";
 
 class TrackCell extends React.Component {
   constructor(props) {
@@ -60,12 +60,15 @@ class TrackCell extends React.Component {
 
 const mapStateToProps = (state, ownProps) => {
   const {
-    display: { skinPlaylistStyle },
     playlist: { tracks }
   } = state;
   const current = getCurrentTrackId(state) === ownProps.id;
   const track = tracks[ownProps.id];
-  return { skinPlaylistStyle, selected: track.selected, current };
+  return {
+    skinPlaylistStyle: getSkinPlaylistStyle(state),
+    selected: track.selected,
+    current
+  };
 };
 
 const mapDispatchToProps = (dispatch, ownProps) => ({

js/components/PlaylistWindow/index.js

@@ -17,7 +17,8 @@ import {
   getScrollOffset,
   getWindowPixelSize,
   getWindowSize,
-  getWindowShade
+  getWindowShade,
+  getSkinPlaylistStyle
 } from "../../selectors";
 
 import { clamp } from "../../utils";
@@ -164,7 +165,6 @@ const mapDispatchToProps = {
 const mapStateToProps = state => {
   const {
     windows: { focused },
-    display: { skinPlaylistStyle },
     media: { duration },
     playlist: { trackOrder }
   } = state;
@@ -174,7 +174,7 @@ const mapStateToProps = state => {
     maxTrackIndex: trackOrder.length - 1,
     playlistWindowPixelSize: getWindowPixelSize(state, "playlist"),
     focused,
-    skinPlaylistStyle,
+    skinPlaylistStyle: getSkinPlaylistStyle(state),
     playlistSize: getWindowSize(state, "playlist"),
     playlistShade: getWindowShade(state, "playlist"),
     duration

js/config.js

@@ -1,4 +1,3 @@
-import skin from "../skins/base-2.91-png.wsz";
 // eslint-disable-next-line no-unused-vars
 import llamaAudio from "../mp3/llama-2.91.mp3";
 
@@ -20,7 +19,6 @@ if (config.audioUrl && !config.initialTracks) {
 }
 
 // Turn on the incomplete playlist window
-export const skinUrl = config.skinUrl === undefined ? skin : config.skinUrl;
 export const initialTracks = config.initialTracks || [
   {
     metaData: { artist: "DJ Mike Llama", title: "Llama Whippin' Intro" },

js/index.js

@@ -22,7 +22,6 @@ import {
 
 import {
   hideAbout,
-  skinUrl,
   initialTracks,
   initialState,
   sentryDsn,
@@ -128,9 +127,6 @@ Raven.context(() => {
   }
 
   const webamp = new Webamp({
-    initialSkin: {
-      url: skinUrl
-    },
     initialTracks,
     availableSkins: [
       { url: base, name: "<Base Skin>" },

js/reducers/display.js

@@ -13,14 +13,14 @@ import {
 const defaultDisplayState = {
   doubled: false,
   marqueeStep: 0,
-  loading: true,
+  loading: false,
   llama: false,
   closed: false,
   working: false,
   skinImages: {},
   skinColors: null,
   skinCursors: null,
-  skinPlaylistStyle: {},
+  skinPlaylistStyle: null,
   skinRegion: {},
   visualizerStyle: 2,
   playlistScrollPosition: 0

js/selectors.js

@@ -309,3 +309,15 @@ export const getWindowsInfo = createSelector(
 );
 
 export const getWindowGraph = createSelector(getWindowsInfo, generateGraph);
+
+export const getSkinPlaylistStyle = state => {
+  return (
+    state.display.skinPlaylistStyle || {
+      normal: "#00FF00",
+      current: "#FFFFFF",
+      normalbg: "#000000",
+      selectedbg: "#0000C6",
+      font: "Arial"
+    }
+  );
+};

js/webamp.js

@@ -96,7 +96,7 @@ class Winamp {
       this.store.dispatch({ type: NETWORK_DISCONNECTED })
     );
 
-    this.store.dispatch(setSkinFromUrl(this.options.initialSkin.url));
+    //this.store.dispatch(setSkinFromUrl(this.options.initialSkin.url));
 
     if (initialTracks) {
       this.appendTracks(initialTracks);
@@ -150,7 +150,7 @@ class Winamp {
 
   async renderWhenReady(node) {
     // Wait for the skin to load.
-    await storeHas(this.store, state => !state.display.loading);
+    //await storeHas(this.store, state => !state.display.loading);
 
     const genWindowComponents = {};
     this.genWindows.forEach(w => {