Added loading spinners to dashboard

packages/app/obojobo-repository/shared/components/__snapshots__/spinner.test.js.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Spinner Spinner component 1`] = `
+<div
+  aria-label="Loading content"
+  className="obojobo-draft--components--spinner"
+>
+  <div
+    aria-hidden={true}
+    className="spinner"
+  >
+    <svg
+      preserveAspectRatio="xMidYMid"
+      viewBox="0 0 100 100"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        cx="50"
+        cy="50"
+        fill="none"
+        r="35"
+        stroke="black"
+        strokeDasharray="60 110"
+        strokeWidth="10"
+        transform="rotate(0.82332 50 50)"
+      />
+    </svg>
+  </div>
+</div>
+`;

packages/app/obojobo-repository/shared/components/dashboard.jsx

@@ -14,6 +14,7 @@ const MultiButton = require('./multi-button')
 const Search = require('./search')
 const ReactModal = require('react-modal')
 const AssessmentScoreDataDialog = require('./assessment-score-data-dialog')
+const Spinner = require('./spinner')
 
 const renderOptionsDialog = props => (
 	<ModuleOptionsDialog
@@ -141,6 +142,7 @@ function Dashboard(props) {
 	const [sortOrder, setSortOrder] = useState(props.sortOrder)
 	const [newModuleId, setNewModuleId] = useState(null)
 	const [lastSelectedIndex, setLastSelectedIndex] = useState(0)
+	const [isLoading, setIsLoading] = useState(false)
 
 	const moduleList = props.filteredModules ? props.filteredModules : props.myModules
 
@@ -151,7 +153,10 @@ function Dashboard(props) {
 	}
 
 	const handleCreateNewModule = useTutorial => {
+		setIsLoading(true)
+
 		props.createNewModule(useTutorial).then(data => {
+			setIsLoading(false)
 			data.payload.value.sort(getSortMethod('newest'))
 			setNewModuleId(data.payload.value[0].draftId)
 		})
@@ -208,6 +213,10 @@ function Dashboard(props) {
 		}
 	}, [onKeyUp])
 
+	let itemCollectionMultiWrapperClassName =
+		'repository--item-list--collection--item--multi-wrapper '
+	itemCollectionMultiWrapperClassName += isLoading ? 'fade' : ''
+
 	return (
 		<span id="dashboard-root">
 			<RepositoryNav
@@ -264,7 +273,8 @@ function Dashboard(props) {
 					<div className="repository--item-list--collection">
 						<div className="repository--item-list--collection--item-wrapper">
 							<div className="repository--item-list--row">
-								<div className="repository--item-list--collection--item--multi-wrapper">
+								{isLoading && <Spinner color="#6714bd" />}
+								<div className={itemCollectionMultiWrapperClassName}>
 									{moduleList.sort(getSortMethod(sortOrder)).map((draft, index) => (
 										<Module
 											isNew={draft.draftId === newModuleId}

packages/app/obojobo-repository/shared/components/dashboard.scss

@@ -28,4 +28,11 @@
 			}
 		}
 	}
+
+	.test {
+		width: 100px;
+		height: 100px;
+		background-color: purple;
+		color: orange;
+	}
 }

packages/app/obojobo-repository/shared/components/layouts/default.scss

@@ -64,6 +64,20 @@
 	@include mq($from: zero, $until: mobileL) {
 		justify-content: space-around;
 	}
+
+	&.fade {
+		animation: fade-out 1s;
+		animation-fill-mode: forwards;
+	}
+
+	@keyframes fade-out {
+		from {
+			opacity: 1;
+		}
+		to {
+			opacity: 0.5;
+		}
+	}
 }
 
 .repository--main-content {

packages/app/obojobo-repository/shared/components/spinner.jsx

@@ -0,0 +1,30 @@
+require('./spinner.scss')
+
+const React = require('react')
+
+function Spinner({ color = 'black' }) {
+	return (
+		<div className="obojobo-draft--components--spinner" aria-label="Loading content">
+			<div className="spinner" aria-hidden={true}>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 100 100"
+					preserveAspectRatio="xMidYMid"
+				>
+					<circle
+						cx="50"
+						cy="50"
+						fill="none"
+						stroke={color}
+						strokeWidth="10"
+						r="35"
+						strokeDasharray="60 110"
+						transform="rotate(0.82332 50 50)"
+					></circle>
+				</svg>
+			</div>
+		</div>
+	)
+}
+
+module.exports = Spinner

packages/app/obojobo-repository/shared/components/spinner.scss

@@ -0,0 +1,41 @@
+.obojobo-draft--components--spinner {
+	position: absolute;
+	width: 1.5em;
+	height: 1.5em;
+	display: block;
+	left: 0;
+	right: 0;
+	margin-top: 10%;
+	margin-left: auto;
+	margin-right: auto;
+	z-index: 999;
+
+	> .spinner {
+		@keyframes obojobo-draft--components--spinner--rotate {
+			from {
+				transform: translate(-50%, -50%) rotate(0deg);
+			}
+
+			to {
+				transform: translate(-50%, -50%) rotate(360deg);
+			}
+		}
+
+		width: 100%;
+		height: 100%;
+		display: inline-block;
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		animation: obojobo-draft--components--spinner--rotate 1.5s linear infinite;
+
+		> svg {
+			width: 100%;
+			height: 100%;
+			position: absolute;
+			left: 0;
+			top: 0;
+			background: none;
+		}
+	}
+}

packages/app/obojobo-repository/shared/components/spinner.test.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import Spinner from './spinner'
+import { create, act } from 'react-test-renderer'
+
+describe('Spinner', () => {
+	test('Spinner component', async () => {
+		let component
+		await act(async () => {
+			component = create(<Spinner />)
+		})
+
+		const tree = component.toJSON()
+
+		expect(tree).toMatchSnapshot()
+	})
+})

yarn.lock

@@ -14282,6 +14282,11 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-debounce@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-7.0.0.tgz#00a67d23d4fe09905e11145a99278da06c01c880"
+  integrity sha512-4fvxEEs7ztdNMh+c497HAgysdq2+Ascem6EaDANGlCIap1JzqfL03Xw8xkYc2lShfXm4uO6PA6V5zcXN7gJdFA==
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"