show docs fetching spinner

frontend/src/App.scss

@@ -1,3 +1,4 @@
+@import "~@blueprintjs/core/lib/scss/variables";
 .animationWrapper {
     position: absolute;
     top: 0;
@@ -7,6 +8,16 @@
     overflow: hidden;
 }
 
+.loadingWrapper {
+    position: fixed;
+    width: 100%;
+    height: 75%;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    overflow: hidden;
+}
+
 .bp3-navbar {
     .bp3-button {
         margin-right: 0.25rem;

frontend/src/Documents/Docs.scss

@@ -17,6 +17,9 @@
     }
     .list {
         display: flex;
+        flex-shrink: 0;
+        flex-grow: 0;
+        flex-wrap: wrap;
         .card {
             height: 15rem;
             width: 10.5rem;

frontend/src/Documents/Overview.tsx

@@ -5,6 +5,7 @@ import * as React from "react";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
 import { IDocumentJSON } from "~../../src/entity/Document";
+import { LoadingStub } from "~LoadingStub";
 import { fetchDocsStart } from "~redux/docs/actions";
 import { IAppState } from "~redux/reducers";
 
@@ -14,6 +15,7 @@ export interface IOverviewComponentProps {
     recent: IDocumentJSON[] | null;
     all: IDocumentJSON[] | null;
     fetching: boolean;
+    spinner: boolean;
 
     fetchDocs: () => void;
 }
@@ -48,7 +50,7 @@ export class OverviewComponent extends React.PureComponent<
                 </div>
             );
         } else {
-            return <div>Loading</div>;
+            return this.props.spinner && <LoadingStub />;
         }
     }
 }
@@ -58,6 +60,7 @@ function mapStateToProps(state: IAppState) {
         recent: state.docs.recent,
         all: state.docs.all,
         fetching: state.docs.fetching,
+        spinner: state.docs.spinner,
     };
 }
 

frontend/src/LoadingStub.tsx

@@ -0,0 +1,10 @@
+import { Spinner } from "@blueprintjs/core";
+import * as React from "react";
+
+export function LoadingStub() {
+    return (
+        <div className="loadingWrapper">
+            <Spinner />
+        </div>
+    );
+}

frontend/src/redux/api/docs/index.ts

@@ -12,3 +12,21 @@ export async function fetchRecentDocs(): Promise<
 export async function fetchAllDocs(): Promise<IAPIResponse<IDocumentJSON[]>> {
     return fetchJSONAuth("/docs/list", "GET");
 }
+
+export async function fetchDoc(
+    id: number,
+): Promise<IAPIResponse<IDocumentJSON>> {
+    return fetchJSONAuth(`docs/byID/${id}`, "GET");
+}
+
+export async function patchDoc(
+    id: number,
+    name?: string,
+    content?: string,
+): Promise<IAPIResponse<IDocumentJSON>> {
+    return fetchJSONAuth(`docs/byID/${id}`, "PATCH", { name, content });
+}
+
+export async function deleteDoc(id: number): Promise<IAPIResponse<boolean>> {
+    return fetchJSONAuth(`docs/byID/${id}`, "DELETE");
+}

frontend/src/redux/docs/actions.ts

@@ -5,6 +5,11 @@ export enum DocsTypes {
     DOCS_FETCH_START = "DOCS_FETCH_START",
     DOCS_FETCH_FAIL = "DOCS_FETCH_FAIL",
     DOCS_FETCH_SUCCESS = "DOCS_FETCH_SUCCESS",
+    DOCS_SHOW_SPINNER = "DOCS_SHOW_SPINNER",
+}
+
+export interface IDocsShowSpinnerAction extends Action {
+    type: DocsTypes.DOCS_SHOW_SPINNER;
 }
 
 export interface IDocsFetchStartAction extends Action {
@@ -26,6 +31,10 @@ export interface IDocsFetchSuccessAction extends Action {
     };
 }
 
+export function showDocsSpinner(): IDocsShowSpinnerAction {
+    return { type: DocsTypes.DOCS_SHOW_SPINNER };
+}
+
 export function fetchDocsStart(): IDocsFetchStartAction {
     return { type: DocsTypes.DOCS_FETCH_START };
 }
@@ -44,4 +53,5 @@ export function fetchDocsSuccess(
 export type DocsAction =
     | IDocsFetchStartAction
     | IDocsFetchFailAction
-    | IDocsFetchSuccessAction;
+    | IDocsFetchSuccessAction
+    | IDocsShowSpinnerAction;

frontend/src/redux/docs/reducer.ts

@@ -8,6 +8,7 @@ export interface IDocsState {
     all: IDocumentJSON[] | null;
     fetching: boolean;
     error: string | null;
+    spinner: boolean;
 }
 
 const defaultDocsState: IDocsState = {
@@ -15,6 +16,7 @@ const defaultDocsState: IDocsState = {
     all: null,
     fetching: false,
     error: null,
+    spinner: false,
 };
 
 export const docsReducer: Reducer<IDocsState, DocsAction> = (
@@ -22,6 +24,8 @@ export const docsReducer: Reducer<IDocsState, DocsAction> = (
     action: DocsAction,
 ) => {
     switch (action.type) {
+        case DocsTypes.DOCS_SHOW_SPINNER:
+            return { ...state, spinner: true };
         case DocsTypes.DOCS_FETCH_START:
             return { ...defaultDocsState, fetching: true };
         case DocsTypes.DOCS_FETCH_SUCCESS:

frontend/src/redux/docs/sagas.ts

@@ -15,10 +15,12 @@ import {
     fetchDocsFail,
     fetchDocsSuccess,
     IDocsFetchStartAction,
+    showDocsSpinner,
 } from "./actions";
 
 function* startSpinner() {
     yield delay(300);
+    yield put(showDocsSpinner());
 }
 
 function* docsFetchStart(action: IDocsFetchStartAction) {