add loader when browsing files

app/actions/fileLoader.js

@@ -2,21 +2,44 @@ import { displayError } from './error';
 
 export const LOAD_ROOT_FOLDER = 'LOAD_ROOT_FOLDER';
 export const CHANGE_FOLDER_SELECTION = 'CHANGE_FOLDER_SELECTION';
+export const LOAD_FILES_IN_FOLDER = 'LOAD_FILES_IN_FOLDER';
 export const STORE_SCROLL_POSITION = 'STORE_SCROLL_POSITION';
 
 export function loadRootFolder() {
-  return {
-    type: LOAD_ROOT_FOLDER,
-    payload: {},
+  return async (dispatch) => { 
+    dispatch({
+      type: LOAD_ROOT_FOLDER,
+      payload: {},
+    });
+
+    // Had to add this wait here otherwise the loading screen would not show
+    const wait = ms => new Promise((resolve) => setTimeout(resolve, ms));
+    await wait(1); // eslint-disable-line
+
+    dispatch({
+      type: LOAD_FILES_IN_FOLDER,
+      payload: {},
+    });
   };
 }
 
 export function changeFolderSelection(folder) {
-  return {
-    type: CHANGE_FOLDER_SELECTION,
-    payload: {
-      folderPath: folder,
-    },
+  return async (dispatch) => {
+    dispatch({
+      type: CHANGE_FOLDER_SELECTION,
+      payload: {
+        folderPath: folder,
+      },
+    });
+
+    // Had to add this wait here otherwise the loading screen would not show
+    const wait = ms => new Promise((resolve) => setTimeout(resolve, ms));
+    await wait(1); // eslint-disable-line
+
+    dispatch({
+      type: LOAD_FILES_IN_FOLDER,
+      payload: {},
+    });
   };
 }
 

app/components/FileLoader.js

@@ -10,6 +10,7 @@ import {
   Button,
   Segment,
   Message,
+  Loader,
 } from 'semantic-ui-react';
 import styles from './FileLoader.scss';
 import FileRow from './FileRow';
@@ -146,6 +147,10 @@ export default class FileLoader extends Component {
 
   renderFilteredFilesNotif(processedFiles) {
     const store = this.props.store || {};
+    if (store.isLoading) {
+      return null;
+    }
+
     const files = store.files || [];
     const filteredFileCount = files.length - processedFiles.length;
 
@@ -230,7 +235,29 @@ export default class FileLoader extends Component {
     );
   }
 
+  renderLoadingState() {
+    const store = this.props.store || {};
+
+    return (
+      <Loader
+        className={styles['loader']}
+        inverted={true}
+        active={store.isLoading}
+        indeterminate={true}
+        inline="centered"
+        size="big"
+      >
+        <span>Loading Files...</span>
+      </Loader>
+    )
+  }
+
   renderFileSelection(files) {
+    const store = this.props.store || {};
+    if (store.isLoading) {
+      return this.renderLoadingState();
+    }
+
     // If we have no files to display, render an empty state
     if (!files.length) {
       return this.renderEmptyLoader();

app/components/FileLoader.scss

@@ -92,3 +92,7 @@
     color: rgba(255, 255, 255, 0.5);
   }
 }
+
+.loader {
+  margin-top: 48px !important;
+}

app/components/common/FolderBrowser.js

@@ -13,7 +13,7 @@ export default class FolderBrowser extends Component {
     changeFolderSelection: PropTypes.func.isRequired,
   };
 
-  selectFolder = folderFullPath => {
+  selectFolder = folderFullPath => () => {
     this.props.changeFolderSelection(folderFullPath);
   };
 
@@ -47,7 +47,7 @@ export default class FolderBrowser extends Component {
         key="selector"
         role="presentation"
         className={selectorClasses}
-        onClick={_.partial(this.selectFolder, folderDetails.fullPath)}
+        onClick={this.selectFolder(folderDetails.fullPath)}
       />,
       <List.Item
         className={`${styles['folder-item']} no-padding`}

app/dolphin-dev/overwrite/Sys/GameSettings/GALE01r2.ini

@@ -121,6 +121,11 @@ $Disable Screen Shake [Achilles1515]
 *Disables all screen shaking
 04030E44 4E800020 #External/Disable Screen Shake/Disable Screen Shake.asm
 
+$Hide HUD [UnclePunch]
+*Hides the timer and player percent HUD elements
+0416E9B0 60000000 #External/Hide Timer and Player HUD/Hide Player HUD.asm
+0416E9A4 60000000 #External/Hide Timer and Player HUD/Hide Timer HUD.asm
+
 $Enable Develop Mode [UnclePunch]
 *Turns develop (debug) mode on. Allows access to frame advance, hit/hurtbox display, and alternate camera angles
 0415FDBC 480000AC #External/Enable Develop Mode/Enable Develop Mode.asm

app/domain/ConsoleConnection.js

@@ -124,9 +124,11 @@ export default class ConsoleConnection {
       this.connectionRetryState = this.getDefaultRetryState();
       this.connectionStatus = ConnectionStatus.CONNECTED;
       this.forceConsoleUiUpdate();
+
+      // TODO: Send message to initiate transfers
     });
 
-    client.setTimeout(15000);
+    client.setTimeout(20000);
 
     client.on('data', (data) => {
       const result = this.slpFileWriter.handleData(data);

app/reducers/fileLoader.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import SlippiGame from 'slp-parser-js';
 import {
-  LOAD_ROOT_FOLDER, CHANGE_FOLDER_SELECTION, STORE_SCROLL_POSITION,
+  LOAD_ROOT_FOLDER, CHANGE_FOLDER_SELECTION, LOAD_FILES_IN_FOLDER, STORE_SCROLL_POSITION,
 } from '../actions/fileLoader';
 import DolphinManager from '../domain/DolphinManager';
 
@@ -14,6 +14,7 @@ const defaultState = {
   dolphinManager: new DolphinManager('vod'),
   rootFolderName: "",
   selectedFolderFullPath: "",
+  isLoading: false,
   folders: {},
   files: [],
   folderFound: false,
@@ -30,6 +31,8 @@ export default function fileLoader(state = defaultState, action) {
     return loadRootFolder(state, action);
   case CHANGE_FOLDER_SELECTION:
     return changeFolderSelection(state, action);
+  case LOAD_FILES_IN_FOLDER:
+    return loadFilesInFolder(state, action);
   case STORE_SCROLL_POSITION:
     return storeScrollPosition(state, action);
   default:
@@ -104,6 +107,16 @@ function loadRootFolder(state) {
 function changeFolderSelection(state, action) {
   const folderPath = action.payload.folderPath;
 
+  return {
+    ...state,
+    selectedFolderFullPath: folderPath,
+    isLoading: true,
+  };
+}
+
+function loadFilesInFolder(state) {
+  const folderPath = state.selectedFolderFullPath;
+
   let files = [];
   try {
     files = fs.readdirSync(folderPath) || [];
@@ -147,10 +160,10 @@ function changeFolderSelection(state, action) {
       hasError: hasError,
     };
   });
-
+  
   return {
     ...state,
-    selectedFolderFullPath: folderPath,
+    isLoading: false,
     files: files,
   };
 }

yarn.lock

@@ -1028,6 +1028,11 @@
     exenv "^1.2.2"
     prop-types "^15.6.2"
 
+"@shelacek/ubjson@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@shelacek/ubjson/-/ubjson-1.0.1.tgz#009d39ea22fa80e036f97e936650951a8225fafe"
+  integrity sha512-0vlllP3M7fUElSd4239wmnv6SqDeymJgjRkb/iusOyDN4I0xjc8hrX4Zk/KYoAesgSdsnnSwhOU7g+IewmdaAw==
+
 "@sinonjs/commons@^1.0.2", "@sinonjs/commons@^1.2.0":
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.3.0.tgz#50a2754016b6f30a994ceda6d9a0a8c36adda849"
@@ -11453,10 +11458,11 @@ slice-ansi@2.0.0:
     is-fullwidth-code-point "^2.0.0"
 
 slp-parser-js@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/slp-parser-js/-/slp-parser-js-2.2.0.tgz#1fe6aa7a5334fe43deaf46b8ff4fd8de7c6e32dd"
-  integrity sha512-U+ibT9x+vc8xJ4X9h0bGjsDr+tSgdBbbQ55rRoxFtC0OIr6uaInAFcO+3964hcjyhw/nOfT4dX3MoPIfU+WheA==
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/slp-parser-js/-/slp-parser-js-2.3.1.tgz#c1f4a683f7218f7440a1314446624a9631434e35"
+  integrity sha512-8ssn694cbmzM6k8F4eTpqi6cgqJHMKB2JsBWqvj+1Ii7v0NmVKidHfobgG5hQBJvWGC4G1oHez2MQJCSy4cdAg==
   dependencies:
+    "@shelacek/ubjson" "^1.0.1"
     iconv-lite "^0.4.24"
     lodash "^4.17.11"