Add debounce to image fetch, add loading spinner other polish

related #235

web/src/helpers/hooks/useIdeState.js

@@ -23,6 +23,7 @@ export const useIdeState = () => {
         splitPercentage: 70,
       },
     },
+    isLoading: false,
   }
   const reducer = (state, { type, payload }) => {
     switch (type) {
@@ -38,6 +39,7 @@ export const useIdeState = () => {
           consoleMessages: payload.message
             ? [...state.consoleMessages, payload.message]
             : payload.message,
+          isLoading: false,
         }
       case 'errorRender':
         return {
@@ -45,6 +47,7 @@ export const useIdeState = () => {
           consoleMessages: payload.message
             ? [...state.consoleMessages, payload.message]
             : payload.message,
+          isLoading: false,
         }
       case 'setIdeType':
         return {
@@ -56,6 +59,11 @@ export const useIdeState = () => {
           ...state,
           layout: payload.message,
         }
+      case 'setLoading':
+        return {
+          ...state,
+          isLoading: true,
+        }
       default:
         return state
     }
@@ -83,6 +91,7 @@ export const useIdeState = () => {
                 })
               }
             })
+          dispatch({ type: 'setLoading' })
           break
 
         default: