Implement small spinner #377

valentinewallace · 2018-06-08T23:08:08Z

@tanx what do you think about using these for our purple spinners? they can't do the gradient from the invision project but they should be able to scale to the correct size

Closes #279

tanx · 2018-06-11T12:28:56Z

@tanx what do you think about using these for our purple spinners? they can't do the gradient from the invision project but they should be able to scale to the correct size

Mmmh. Probably good enough for a first iteration. Let me test it out.

tanx

I made a few minor changes. Can you get it to scale?

tanx · 2018-06-11T12:30:18Z

stories/component/spinner.js

+  .addDecorator(story => (
+    <MainContent style={{ justifyContent: 'center' }}>{story()}</MainContent>
+  ))
+  .add('SmallSpinner', () => <SmallSpinner />);


I tried to set height/width via the style attribute but I couldn't scale it 🤔

valentinewallace · 2018-06-11T20:48:12Z

Added scaling :)

I was thinking of making the percentage-based medium spinners using this tutorial: https://cmichel.io/react-native-progress-circle LMK if you think that's not a good idea

valentinewallace · 2018-06-14T08:06:55Z

@tanx Hey, using the ART library I couldn't get the linear gradient to work. are you opposed to using this library? https://github.com/godaddy/svgs

tanx

I was thinking of making the percentage-based medium spinners using this tutorial: https://cmichel.io/react-native-progress-circle LMK if you think that's not a good idea

That looks really promising.

@tanx Hey, using the ART library I couldn't get the linear gradient to work. are you opposed to using this library? https://github.com/godaddy/svgs

Sounds good. Looks like we'll need svgs anyway for this #289. I sent a PR to create-react-app a while back to add support for svgs facebook/create-react-app#4224

I also rebased this branch on the current master and added some comments in my review.

tanx · 2018-06-19T11:25:34Z

src/component/spinner.js

+    endDegree >= 180
+  );
+  return p;
+};


Nice. Could we begin the circle from to top/center like in the design?

tanx · 2018-06-19T11:25:58Z

src/component/spinner.js

+  StyleSheet,
+  View,
+  ART,
+} from 'react-native';


Seems like there are currently linter errors in the build https://travis-ci.org/lightninglabs/lightning-app/jobs/394053652#L4509

valentinewallace · 2018-06-21T01:15:57Z

@tanx got the gradient working! still working on how to modularize the components to make them reusable for the remaining spinners

tanx

Cool. Haven’t tested it yet. Just one comment so far...

tanx · 2018-06-21T10:06:59Z

src/component/spinner.js

+import { color, font } from './style';
+import Icon from '../component/icon';
+import Text from '../component/text';
+import Svg, { Path, Circle, Defs, Stop, LinearGradient } from 'svgs';


Given that svgs is web only, I’d wrap it and re-export it in an svg.js component. That way we can implement a svg.ios.js and svg.android.js components that re-export react-native-svg. See https://facebook.github.io/react-native/docs/platform-specific-code.html

tanx

Added a few comments

tanx · 2018-06-22T12:49:03Z

package.json

    "react-native-web": "^0.6.0",
-    "react-scripts": "^1.1.1"
+    "react-scripts": "^1.1.1",
+    "svgs": "^3.2.1"


Seems like the package-lock.json shouldn’t change so much here. Which node/npm version are you using? We should stick with the current LTS node@8.x/npm@5.x since newer versions of npm will rebuild the package-lock.json and potentially cause incompapatibilites on travis.

Gotcha, i'll switch versions

tanx · 2018-06-22T12:50:19Z

src/component/spinner.js

+  Defs,
+  Stop,
+  LinearGradient,
+} from '../component/svg';


./svg from the components dir (for text/icon too)

tanx · 2018-06-22T12:53:54Z

src/component/svg.js

+export const LinearGradient = LinearGradientJS;
+
+const Svg = SvgJS;
+export default Svg;


We should re-export all here. Try

export * from 'svgs';

See https://stackoverflow.com/questions/29844074/es6-export-all-values-from-object

tanx · 2018-06-22T13:50:30Z

package-lock.json

+        "prop-types": "15.6.1",
+        "rip-out": "1.0.0"
+      }
+    },


@valentinewallace I removed the changes and rebased the branch.

tanx · 2018-06-22T14:05:20Z

Also, I was getting a warning in the cobsole in storybook.

valentinewallace · 2018-06-23T02:23:59Z

Also, I was getting a warning in the cobsole in storybook.

working on it... can't seem to properly import resize-observer-polyfill

tanx · 2018-06-25T08:27:33Z

working on it... can't seem to properly import resize-observer-polyfill

Ok cool.

valentinewallace · 2018-06-26T00:10:14Z

Plan is to move the LoadNetworkSpinner into the file for this screen once this PR is finalized, since it's custom-made for that screen

tanx · 2018-07-02T18:08:14Z

src/component/spinner.js

+});
+export const SmallSpinner = ({ ...props }) => (
+  <ActivityIndicator
+    sizeM="small"


@valentinewallace this prop does not exist. Only size https://facebook.github.io/react-native/docs/activityindicator#size

valentinewallace · 2018-07-03T06:40:37Z

@tanx could we close this in favor of #406? it includes the same code but rebasing on top would be annoying because i moved the LoadNetworkSpinner into the file specific to its screen

tanx

Looks really good 👍 I made some minor resize changes and have just a small comment on the storybook entry.

tanx · 2018-07-03T07:53:32Z

stories/component/spinner.js

+    <Background
+      color={color.blackDark}
+      style={{ flexDirection: 'row', width: '100%' }}
+    >


You're wrapping a Background inside of a MainContent. They're meant to be used the other way around. You wouldn't need to specify the width in that case.

tanx

I made a few more minor changes. But looks good now.

tanx suggested changes Jun 11, 2018

View reviewed changes

valentinewallace force-pushed the spinner-components branch 2 times, most recently from db42cc6 to 8b9bedd Compare June 14, 2018 08:05

tanx force-pushed the spinner-components branch from 8b9bedd to 932cfb6 Compare June 19, 2018 11:07

tanx suggested changes Jun 19, 2018

View reviewed changes

valentinewallace force-pushed the spinner-components branch 2 times, most recently from b40dc20 to 67bc896 Compare June 21, 2018 00:43

tanx suggested changes Jun 21, 2018

View reviewed changes

tanx suggested changes Jun 22, 2018

View reviewed changes

tanx force-pushed the spinner-components branch from 51f9ff5 to 607dad0 Compare June 22, 2018 13:43

tanx reviewed Jun 22, 2018

View reviewed changes

package-lock.json

"prop-types": "15.6.1",

"rip-out": "1.0.0"

}

},

Copy link

Contributor

tanx Jun 22, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@valentinewallace I removed the changes and rebased the branch.

valentinewallace self-assigned this Jun 25, 2018

tanx reviewed Jul 2, 2018

View reviewed changes

valentinewallace and others added 8 commits July 3, 2018 00:32

Implement small spinner

f1342cd

Use regular purple in spinner

3359a02

Inherit props

7159b07

Add scaling for small spinner

ce9e51d

V1 of timed spinner

32f4d7a

Implement spinner for loading network using svgs

8f2fcfa

Modularize gradient

e73dd09

Wrap and re-export svgs package

4ead478

valentinewallace and others added 8 commits July 3, 2018 00:33

Add optional style prop to medium spinner

20a55e8

Fix linting

fd3a9c2

Update package-lock.json

c3e9674

Re-export all svgs name spaces generically

eed252d

Fix component import paths

13344f8

Break progress path and spinner fill into components

770e67e

Make spinner reuseable for OpenChannels

6e8db2b

Remove style param for LoadNetworkSpinner

7a2b913

valentinewallace force-pushed the spinner-components branch from 61078ac to 7a2b913 Compare July 3, 2018 07:33

valentinewallace and others added 5 commits July 3, 2018 00:34

Fix typo

8b06aee

Decrease small spinner size

a08b9e9

Decrease network spinner size

b62c998

Fix spaces

af340fb

Rename SvgJS to Sag

85f5791

tanx suggested changes Jul 3, 2018

View reviewed changes

Change storybook styles

d7b546a

valentinewallace force-pushed the spinner-components branch from 39dbe40 to d7b546a Compare July 3, 2018 08:42

tanx added 2 commits July 3, 2018 10:52

Fix storybook decorators

15746e3

Add missing purple again

909edd7

tanx approved these changes Jul 3, 2018

View reviewed changes

tanx merged commit 2ae5b54 into master Jul 3, 2018

tanx deleted the spinner-components branch July 3, 2018 09:25

Implement small spinner #377

Implement small spinner #377

Uh oh!

Conversation

valentinewallace commented Jun 8, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tanx commented Jun 11, 2018

Uh oh!

tanx left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

valentinewallace commented Jun 11, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

valentinewallace commented Jun 14, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tanx left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

valentinewallace commented Jun 21, 2018

Uh oh!

tanx left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tanx left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tanx commented Jun 22, 2018

Uh oh!

valentinewallace commented Jun 23, 2018

Uh oh!

tanx commented Jun 25, 2018

Uh oh!

valentinewallace commented Jun 26, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

valentinewallace commented Jul 3, 2018

Uh oh!

tanx left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tanx left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

valentinewallace commented Jun 8, 2018 •

edited

Loading

valentinewallace commented Jun 11, 2018 •

edited

Loading

valentinewallace commented Jun 14, 2018 •

edited

Loading

tanx left a comment •

edited

Loading