Commit aae5ce9228eff9326c330b6980708cde7aae88f8
1 parent
37c5e9bbc1
Exists in
master
wire up custom loader for documents list
Showing
5 changed files
with
47 additions
and
17 deletions
Show diff stats
client/stylesheets/_extends.scss
| 1 | %clearfix { | File was deleted | |
| 2 | *zoom: 1; | ||
| 3 | |||
| 4 | &:before, | ||
| 5 | &:after { | ||
| 6 | display: table; | ||
| 7 | content: ""; | ||
| 8 | } | ||
| 9 | |||
| 10 | &:after { | ||
| 11 | clear: both; | ||
| 12 | } | ||
| 13 | } | ||
| 14 | 1 | %clearfix { |
client/stylesheets/application.scss
| 1 | @import "extends"; | 1 | @import "base/extends"; |
| 2 | |||
| 3 | @import "base/animations"; | 2 | @import "base/animations"; |
| 4 | @import "base/forms"; | 3 | @import "base/forms"; |
| 5 | 4 | ||
| 6 | @import "module/loading"; | 5 | @import "module/loading"; |
| 7 | @import "module/login"; | 6 | @import "module/login"; |
| 8 | @import "module/signup"; | 7 | @import "module/signup"; |
| 9 | 8 | ||
| 10 | @import "state/navbar"; | 9 | @import "state/navbar"; |
| 11 | 10 |
client/stylesheets/base/_extends.scss
| File was created | 1 | %clearfix { | |
| 2 | *zoom: 1; | ||
| 3 | |||
| 4 | &:before, | ||
| 5 | &:after { | ||
| 6 | display: table; | ||
| 7 | content: ""; | ||
| 8 | } | ||
| 9 | |||
| 10 | &:after { | ||
| 11 | clear: both; | ||
| 12 | } | ||
| 13 | } | ||
| 14 |
imports/ui/components/loading.js
| File was created | 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 | ); | ||
| 29 |
imports/ui/containers/documents-list.js
| 1 | import { composeWithTracker } from 'react-komposer'; | 1 | import { composeWithTracker } from 'react-komposer'; |
| 2 | import { Documents } from '../../api/documents/documents.js'; | 2 | import { Documents } from '../../api/documents/documents.js'; |
| 3 | import { DocumentsList } from '../components/documents-list.js'; | 3 | import { DocumentsList } from '../components/documents-list.js'; |
| 4 | import { Loading } from '../components/loading.js'; | ||
| 4 | 5 | ||
| 5 | const composer = (params, onReady) => { | 6 | const composer = (params, onReady) => { |
| 6 | const subscription = Meteor.subscribe('documents'); | 7 | const subscription = Meteor.subscribe('documents'); |
| 7 | if (subscription.ready()) { | 8 | if (subscription.ready()) { |
| 8 | const documents = Documents.find().fetch(); | 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); |
| 14 | 17 |