Skip to content

Commit cd2759e

Browse files
jamaljsrjamaljsr
authored
Merge pull request #33 from lightninglabs/feat/animations
Add loading animation to swap processing step
2 parents 98c26cb + dbd188b commit cd2759e

File tree

12 files changed

+418
-23
lines changed

12 files changed

+418
-23
lines changed

‎app/package.json

+2
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"emotion-theming": "10.0.27",
2727
"i18next": "19.4.4",
2828
"i18next-browser-languagedetector": "4.1.1",
29+
"lottie-web": "5.6.8",
2930
"mobx": "5.15.4",
3031
"mobx-react-lite": "2.0.6",
3132
"react": "^16.13.1",
@@ -58,6 +59,7 @@
5859
"eslint-plugin-prettier": "3.1.3",
5960
"eslint-plugin-react": "7.19.0",
6061
"google-protobuf": "3.11.4",
62+
"jest-canvas-mock": "2.2.0",
6163
"jest-environment-jsdom-sixteen": "1.0.3",
6264
"node-sass": "4.14.1",
6365
"prettier": "2.0.5",

‎app/src/__tests__/components/loop/LoopPage.spec.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ describe('LoopPage component', () => {
109109
fireEvent.click(getByText('Next'));
110110
expect(getByText('Step 2 of 2')).toBeInTheDocument();
111111
fireEvent.click(getByText('Confirm'));
112-
expect(getByText(/Swap Processing/)).toBeInTheDocument();
112+
expect(getByText('Configuring Loops')).toBeInTheDocument();
113113
await waitFor(() => {
114114
expect(grpcMock.unary).toHaveBeenCalledWith(
115115
expect.objectContaining({ methodName: 'LoopOut' }),
@@ -128,7 +128,7 @@ describe('LoopPage component', () => {
128128
fireEvent.click(getByText('Next'));
129129
expect(getByText('Step 2 of 2')).toBeInTheDocument();
130130
fireEvent.click(getByText('Confirm'));
131-
expect(getByText(/Swap Processing/)).toBeInTheDocument();
131+
expect(getByText('Configuring Loops')).toBeInTheDocument();
132132
expect(store.buildSwapStore.processingTimeout).toBeDefined();
133133
fireEvent.click(getByText('arrow-left.svg'));
134134
expect(getByText('Review the quote')).toBeInTheDocument();

‎app/src/__tests__/components/loop/SwapWizard.spec.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ describe('SwapWizard component', () => {
5858
fireEvent.click(getByText('Next'));
5959
expect(getByText('Step 2 of 2')).toBeInTheDocument();
6060
fireEvent.click(getByText('Confirm'));
61-
expect(getByText(/Swap Processing/)).toBeInTheDocument();
61+
expect(getByText('Configuring Loops')).toBeInTheDocument();
6262
fireEvent.click(getByText('arrow-left.svg'));
6363
expect(getByText('Step 2 of 2')).toBeInTheDocument();
6464
fireEvent.click(getByText('arrow-left.svg'));
@@ -128,7 +128,7 @@ describe('SwapWizard component', () => {
128128

129129
it('should display the description label', () => {
130130
const { getByText } = renderWrap();
131-
expect(getByText(/Swap Processing/)).toBeInTheDocument();
131+
expect(getByText('Configuring Loops')).toBeInTheDocument();
132132
});
133133

134134
it('should display an error message', () => {

‎app/src/assets/animations/loading.json

+322
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,322 @@
1+
{
2+
"v": "4.6.3",
3+
"fr": 29.9700012207031,
4+
"ip": 0,
5+
"op": 35.0000014255792,
6+
"w": 400,
7+
"h": 400,
8+
"nm": "Comp 1",
9+
"ddd": 0,
10+
"assets": [],
11+
"layers": [
12+
{
13+
"ddd": 0,
14+
"ind": 1,
15+
"ty": 4,
16+
"nm": "Shape Layer 1",
17+
"ks": {
18+
"o": { "a": 0, "k": 100 },
19+
"r": { "a": 0, "k": 0 },
20+
"p": { "a": 0, "k": [200, 205, 0] },
21+
"a": { "a": 0, "k": [0, 0, 0] },
22+
"s": { "a": 0, "k": [77.411, 77.411, 100] }
23+
},
24+
"ao": 0,
25+
"shapes": [
26+
{
27+
"ty": "gr",
28+
"it": [
29+
{
30+
"d": 1,
31+
"ty": "el",
32+
"s": { "a": 0, "k": [288.949, 288.949] },
33+
"p": { "a": 0, "k": [0, 0] },
34+
"nm": "Ellipse Path 1",
35+
"mn": "ADBE Vector Shape - Ellipse"
36+
},
37+
{
38+
"ty": "tm",
39+
"s": {
40+
"a": 1,
41+
"k": [
42+
{
43+
"i": { "x": [0.667], "y": [-2.959] },
44+
"o": { "x": [0.333], "y": [0] },
45+
"n": ["0p667_-2p959_0p333_0"],
46+
"t": 0,
47+
"s": [6],
48+
"e": [7.98]
49+
},
50+
{
51+
"i": { "x": [0.667], "y": [1] },
52+
"o": { "x": [0.333], "y": [0.226] },
53+
"n": ["0p667_1_0p333_0p226"],
54+
"t": 4,
55+
"s": [7.98],
56+
"e": [34]
57+
},
58+
{
59+
"i": { "x": [0.667], "y": [1] },
60+
"o": { "x": [0.333], "y": [0] },
61+
"n": ["0p667_1_0p333_0"],
62+
"t": 7,
63+
"s": [34],
64+
"e": [54]
65+
},
66+
{
67+
"i": { "x": [0.667], "y": [1] },
68+
"o": { "x": [0.333], "y": [0] },
69+
"n": ["0p667_1_0p333_0"],
70+
"t": 12,
71+
"s": [54],
72+
"e": [100]
73+
},
74+
{
75+
"i": { "x": [0.667], "y": [0.667] },
76+
"o": { "x": [0.333], "y": [0.333] },
77+
"n": ["0p667_0p667_0p333_0p333"],
78+
"t": 19,
79+
"s": [100],
80+
"e": [100]
81+
},
82+
{ "t": 35.0000014255792 }
83+
],
84+
"ix": 1
85+
},
86+
"e": {
87+
"a": 1,
88+
"k": [
89+
{
90+
"i": { "x": [0.667], "y": [1] },
91+
"o": { "x": [0.333], "y": [0] },
92+
"n": ["0p667_1_0p333_0"],
93+
"t": 0,
94+
"s": [0],
95+
"e": [47]
96+
},
97+
{
98+
"i": { "x": [0.667], "y": [1] },
99+
"o": { "x": [0.333], "y": [0] },
100+
"n": ["0p667_1_0p333_0"],
101+
"t": 24,
102+
"s": [47],
103+
"e": [92]
104+
},
105+
{ "t": 35.0000014255792 }
106+
],
107+
"ix": 2
108+
},
109+
"o": {
110+
"a": 1,
111+
"k": [
112+
{
113+
"i": { "x": [0.667], "y": [1] },
114+
"o": { "x": [0.333], "y": [0] },
115+
"n": ["0p667_1_0p333_0"],
116+
"t": 0,
117+
"s": [-70],
118+
"e": [46]
119+
},
120+
{
121+
"i": { "x": [0.667], "y": [1] },
122+
"o": { "x": [0.333], "y": [0] },
123+
"n": ["0p667_1_0p333_0"],
124+
"t": 7,
125+
"s": [46],
126+
"e": [115]
127+
},
128+
{
129+
"i": { "x": [0.667], "y": [1] },
130+
"o": { "x": [0.333], "y": [0] },
131+
"n": ["0p667_1_0p333_0"],
132+
"t": 12,
133+
"s": [115],
134+
"e": [144]
135+
},
136+
{
137+
"i": { "x": [0.667], "y": [1] },
138+
"o": { "x": [0.333], "y": [0] },
139+
"n": ["0p667_1_0p333_0"],
140+
"t": 19,
141+
"s": [144],
142+
"e": [173]
143+
},
144+
{
145+
"i": { "x": [0.667], "y": [1] },
146+
"o": { "x": [0.333], "y": [0] },
147+
"n": ["0p667_1_0p333_0"],
148+
"t": 24,
149+
"s": [173],
150+
"e": [309]
151+
},
152+
{ "t": 35.0000014255792 }
153+
],
154+
"ix": 3
155+
},
156+
"m": 1,
157+
"ix": 2,
158+
"nm": "Trim Paths 1",
159+
"mn": "ADBE Vector Filter - Trim"
160+
},
161+
{
162+
"ty": "st",
163+
"c": { "a": 0, "k": [0, 0.6784313725490196, 0.7764705882352941, 1] },
164+
"o": { "a": 0, "k": 100 },
165+
"w": { "a": 0, "k": 14 },
166+
"lc": 2,
167+
"lj": 1,
168+
"ml": 4,
169+
"nm": "Stroke 1",
170+
"mn": "ADBE Vector Graphic - Stroke"
171+
},
172+
{
173+
"ty": "tr",
174+
"p": { "a": 0, "k": [2.549, -5.717], "ix": 2 },
175+
"a": { "a": 0, "k": [0, 0], "ix": 1 },
176+
"s": { "a": 0, "k": [108.139, 108.139], "ix": 3 },
177+
"r": { "a": 0, "k": 0, "ix": 6 },
178+
"o": { "a": 0, "k": 100, "ix": 7 },
179+
"sk": { "a": 0, "k": 0, "ix": 4 },
180+
"sa": { "a": 0, "k": 0, "ix": 5 },
181+
"nm": "Transform"
182+
}
183+
],
184+
"nm": "big_circle",
185+
"np": 4,
186+
"cix": 2,
187+
"ix": 1,
188+
"mn": "ADBE Vector Group"
189+
},
190+
{
191+
"ty": "gr",
192+
"it": [
193+
{
194+
"d": 1,
195+
"ty": "el",
196+
"s": { "a": 0, "k": [288.949, 288.949] },
197+
"p": { "a": 0, "k": [0, 0] },
198+
"nm": "Ellipse Path 1",
199+
"mn": "ADBE Vector Shape - Ellipse"
200+
},
201+
{
202+
"ty": "tm",
203+
"s": {
204+
"a": 1,
205+
"k": [
206+
{
207+
"i": { "x": [0.667], "y": [1] },
208+
"o": { "x": [0.333], "y": [0] },
209+
"n": ["0p667_1_0p333_0"],
210+
"t": 1,
211+
"s": [0],
212+
"e": [22.284]
213+
},
214+
{
215+
"i": { "x": [0.667], "y": [1] },
216+
"o": { "x": [0.333], "y": [0] },
217+
"n": ["0p667_1_0p333_0"],
218+
"t": 15,
219+
"s": [22.284],
220+
"e": [84]
221+
},
222+
{ "t": 35.0000014255792 }
223+
],
224+
"ix": 1
225+
},
226+
"e": {
227+
"a": 1,
228+
"k": [
229+
{
230+
"i": { "x": [0.667], "y": [1] },
231+
"o": { "x": [0.333], "y": [0] },
232+
"n": ["0p667_1_0p333_0"],
233+
"t": 0,
234+
"s": [13],
235+
"e": [100]
236+
},
237+
{
238+
"i": { "x": [0.667], "y": [0.667] },
239+
"o": { "x": [0.333], "y": [0.333] },
240+
"n": ["0p667_0p667_0p333_0p333"],
241+
"t": 15,
242+
"s": [100],
243+
"e": [100]
244+
},
245+
{
246+
"i": { "x": [0.667], "y": [0.667] },
247+
"o": { "x": [0.333], "y": [0.333] },
248+
"n": ["0p667_0p667_0p333_0p333"],
249+
"t": 29,
250+
"s": [100],
251+
"e": [100]
252+
},
253+
{ "t": 35.0000014255792 }
254+
],
255+
"ix": 2
256+
},
257+
"o": {
258+
"a": 1,
259+
"k": [
260+
{
261+
"i": { "x": [0.833], "y": [0.833] },
262+
"o": { "x": [0.333], "y": [0] },
263+
"n": ["0p833_0p833_0p333_0"],
264+
"t": 1,
265+
"s": [-22],
266+
"e": [11]
267+
},
268+
{
269+
"i": { "x": [0.833], "y": [0.833] },
270+
"o": { "x": [0.167], "y": [0.167] },
271+
"n": ["0p833_0p833_0p167_0p167"],
272+
"t": 33,
273+
"s": [11],
274+
"e": [22]
275+
},
276+
{ "t": 35.0000014255792 }
277+
],
278+
"ix": 3
279+
},
280+
"m": 1,
281+
"ix": 2,
282+
"nm": "Trim Paths 1",
283+
"mn": "ADBE Vector Filter - Trim"
284+
},
285+
{
286+
"ty": "st",
287+
"c": { "a": 0, "k": [0, 0.4117647058823529, 0.6941176470588235, 1] },
288+
"o": { "a": 0, "k": 100 },
289+
"w": { "a": 0, "k": 19 },
290+
"lc": 2,
291+
"lj": 1,
292+
"ml": 4,
293+
"nm": "Stroke 1",
294+
"mn": "ADBE Vector Graphic - Stroke"
295+
},
296+
{
297+
"ty": "tr",
298+
"p": { "a": 0, "k": [2.549, -5.717], "ix": 2 },
299+
"a": { "a": 0, "k": [0, 0], "ix": 1 },
300+
"s": { "a": 0, "k": [72.226, 72.226], "ix": 3 },
301+
"r": { "a": 0, "k": 0, "ix": 6 },
302+
"o": { "a": 0, "k": 100, "ix": 7 },
303+
"sk": { "a": 0, "k": 0, "ix": 4 },
304+
"sa": { "a": 0, "k": 0, "ix": 5 },
305+
"nm": "Transform"
306+
}
307+
],
308+
"nm": "small_circle",
309+
"np": 4,
310+
"cix": 2,
311+
"ix": 2,
312+
"mn": "ADBE Vector Group"
313+
}
314+
],
315+
"ip": 0,
316+
"op": 900.000036657751,
317+
"st": 0,
318+
"bm": 0,
319+
"sr": 1
320+
}
321+
]
322+
}

0 commit comments

Comments
 (0)