wire up custom loader for documents list

tmcdeveloper
1 parent 37c5e9bbc1
Showing 5 changed files with 47 additions and 17 deletions Show diff stats
client/stylesheets/_extends.scss
client/stylesheets/application.scss
client/stylesheets/base/_extends.scss
imports/ui/components/loading.js
imports/ui/containers/documents-list.js
@@ -1,13 +0,0 @@
-%clearfix {
-  *zoom: 1;
-
-  &:before,
-  &:after {
-    display: table;
-    content: "";
-  }
-
-  &:after {
-    clear: both;
-  }
-}
-@import "extends";
-
+@import "base/extends";
 @import "base/animations";
 @import "base/forms";
  
@@ -0,0 +1,13 @@
+%clearfix {
+  *zoom: 1;
+
+  &:before,
+  &:after {
+    display: table;
+    content: "";
+  }
+
+  &:after {
+    clear: both;
+  }
+}
@@ -0,0 +1,28 @@
+import React from 'react';
+
+export const Loading = () => (
+  <svg
+    version="1.1"
+    className="loading"
+    xmlns="http://www.w3.org/2000/svg"
+    x="0px"
+    y="0px"
+    width="40px"
+    height="40px"
+    viewBox="0 0 40 40"
+    enable-background="new 0 0 40 40">
+      <path
+      opacity="1.0"
+      fill="#eee"
+      d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,
+      14.946,14.946s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,
+      5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634c0-6.425,
+      5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,
+      26.541,26.626,31.749,20.201,31.749z"/>
+      <path
+        fill="#da5347"
+        d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
+      C22.32,8.481,24.301,9.057,26.013,10.047z">
+    </path>
+  </svg>
+);
 import { composeWithTracker } from 'react-komposer';
 import { Documents } from '../../api/documents/documents.js';
 import { DocumentsList } from '../components/documents-list.js';
+import { Loading } from '../components/loading.js';
  
 const composer = (params, onReady) => {
   const subscription = Meteor.subscribe('documents');
   if (subscription.ready()) {
     const documents = Documents.find().fetch();
-    onReady(null, { documents });
+    // setTimeout is used to visually buffer the loading spinner so it's not
+    // jarring. Can just call onReady directly if you wish :)
+    setTimeout(() => { onReady(null, { documents }); }, 500);
   }
 };
  
-export default composeWithTracker(composer)(DocumentsList);
+export default composeWithTracker(composer, Loading)(DocumentsList);
...	...	@@ -1,13 +0,0 @@
1		-%clearfix {
2		- *zoom: 1;
3		-
4		- &:before,
5		- &:after {
6		- display: table;
7		- content: "";
8		- }
9		-
10		- &:after {
11		- clear: both;
12		- }
13		-}
1		-@import "extends";
2		-
	1	+@import "base/extends";
3	2	@import "base/animations";
4	3	@import "base/forms";
5	4
...	...
...	...	@@ -0,0 +1,13 @@
	1	+%clearfix {
	2	+ *zoom: 1;
	3	+
	4	+ &:before,
	5	+ &:after {
	6	+ display: table;
	7	+ content: "";
	8	+ }
	9	+
	10	+ &:after {
	11	+ clear: both;
	12	+ }
	13	+}
...	...
...	...	@@ -0,0 +1,28 @@
	1	+import React from 'react';
	2	+
	3	+export const Loading = () => (
	4	+ <svg
	5	+ version="1.1"
	6	+ className="loading"
	7	+ xmlns="http://www.w3.org/2000/svg"
	8	+ x="0px"
	9	+ y="0px"
	10	+ width="40px"
	11	+ height="40px"
	12	+ viewBox="0 0 40 40"
	13	+ enable-background="new 0 0 40 40">
	14	+ <path
	15	+ opacity="1.0"
	16	+ fill="#eee"
	17	+ d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,
	18	+ 14.946,14.946s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,
	19	+ 5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634c0-6.425,
	20	+ 5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,
	21	+ 26.541,26.626,31.749,20.201,31.749z"/>
	22	+ <path
	23	+ fill="#da5347"
	24	+ d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
	25	+ C22.32,8.481,24.301,9.057,26.013,10.047z">
	26	+ </path>
	27	+ </svg>
	28	+);
...	...
1	1	import { composeWithTracker } from 'react-komposer';
2	2	import { Documents } from '../../api/documents/documents.js';
3	3	import { DocumentsList } from '../components/documents-list.js';
	4	+import { Loading } from '../components/loading.js';
4	5
5	6	const composer = (params, onReady) => {
6	7	const subscription = Meteor.subscribe('documents');
7	8	if (subscription.ready()) {
8	9	const documents = Documents.find().fetch();
9		- onReady(null, { documents });
	10	+ // setTimeout is used to visually buffer the loading spinner so it's not
	11	+ // jarring. Can just call onReady directly if you wish :)
	12	+ setTimeout(() => { onReady(null, { documents }); }, 500);
10	13	}
11	14	};
12	15
13		-export default composeWithTracker(composer)(DocumentsList);
	16	+export default composeWithTracker(composer, Loading)(DocumentsList);
...	...