Make loading state accessible to consumers

js/actionCreators/files.js

@@ -31,7 +31,8 @@ import {
   MEDIA_TAG_REQUEST_INITIALIZED,
   MEDIA_TAG_REQUEST_FAILED,
   SET_SKIN_DATA,
-  LOADED
+  LOADED,
+  LOADING
 } from "../actionTypes";
 import LoadQueue from "../loadQueue";
 
@@ -80,6 +81,7 @@ export function loadFilesFromReferences(
 
 export function setSkinFromArrayBuffer(arrayBuffer) {
   return async dispatch => {
+    dispatch({ type: LOADING });
     const skinData = await skinParser(arrayBuffer);
     dispatch({
       type: SET_SKIN_DATA,
@@ -95,6 +97,7 @@ export function setSkinFromArrayBuffer(arrayBuffer) {
 
 export function setSkinFromFileReference(skinFileReference) {
   return async dispatch => {
+    dispatch({ type: LOADING });
     const arrayBuffer = await genArrayBufferFromFileReference(
       skinFileReference
     );
@@ -104,6 +107,7 @@ export function setSkinFromFileReference(skinFileReference) {
 
 export function setSkinFromUrl(url) {
   return async dispatch => {
+    dispatch({ type: LOADING });
     try {
       const response = await fetch(url);
       if (!response.ok) {

js/actionTypes.js

@@ -68,3 +68,5 @@ export const REGISTER_VISUALIZER = "REGISTER_VISUALIZER";
 export const SET_Z_INDEX = "SET_Z_INDEX";
 export const DISABLE_MARQUEE = "DISABLE_MARQUEE";
 export const SET_DUMMY_VIZ_DATA = "SET_DUMMY_VIZ_DATA";
+export const HIDE_WINDOW = "HIDE_WINDOW";
+export const LOADING = "LOADING";

js/reducers/display.js

@@ -14,7 +14,8 @@ import {
   REGISTER_VISUALIZER,
   SET_Z_INDEX,
   DISABLE_MARQUEE,
-  SET_DUMMY_VIZ_DATA
+  SET_DUMMY_VIZ_DATA,
+  LOADING
 } from "../actionTypes";
 import { DEFAULT_SKIN, VISUALIZER_ORDER } from "../constants";
 
@@ -69,6 +70,8 @@ const display = (state = defaultDisplayState, action) => {
       return { ...state, working: true };
     case CLOSE_WINAMP:
       return { ...state, closed: true };
+    case LOADING:
+      return { ...state, loading: true };
     case LOADED:
       return { ...state, loading: false };
     case SET_SKIN_DATA:

js/webamp.js

@@ -129,6 +129,7 @@ class Winamp {
     if (initialSkin) {
       this.store.dispatch(setSkinFromUrl(initialSkin.url));
     } else {
+      // We are using the default skin.
       this.store.dispatch({ type: LOADED });
     }
 
@@ -182,10 +183,13 @@ class Winamp {
     return this._actionEmitter.on(MINIMIZE_WINAMP, cb);
   }
 
-  async renderWhenReady(node) {
+  async skinIsLoaded() {
     // Wait for the skin to load.
-    await storeHas(this.store, state => !state.display.loading);
+    return storeHas(this.store, state => !state.display.loading);
+  }
 
+  async renderWhenReady(node) {
+    await this.skinIsLoaded();
     const genWindowComponents = {};
     this.genWindows.forEach(w => {
       genWindowComponents[w.id] = w.Component;