feat: add new affine loading component

This commit is contained in:
himself65
2023-04-11 22:57:20 -05:00
parent 07a11ed767
commit db8fe4e09a
12 changed files with 1588 additions and 8 deletions

View File

@@ -0,0 +1,23 @@
import { useTheme } from '@mui/material';
import { InternalLottie } from '../internal-lottie';
import dark from './loading-black.json';
import light from './loading-white.json';
export const AffineLoading = () => {
const theme = useTheme();
const isDark = theme.palette.mode === 'dark';
return (
<InternalLottie
key={isDark ? 'dark' : 'light'}
options={{
loop: false,
autoplay: false,
animationData: isDark ? light : dark,
rendererSettings: {
preserveAspectRatio: 'xMidYMid slice',
},
}}
/>
);
};

View File

@@ -0,0 +1,770 @@
{
"v": "5.9.0",
"fr": 60,
"ip": 0,
"op": 241,
"w": 1024,
"h": 1024,
"nm": "logo-tri",
"ddd": 0,
"assets": [],
"layers": [
{
"ddd": 0,
"ind": 1,
"ty": 4,
"nm": "logo/logo-tri-stroke Outlines 2",
"sr": 1,
"ks": {
"o": { "a": 0, "k": 100, "ix": 11 },
"r": { "a": 0, "k": 0, "ix": 10 },
"p": { "a": 0, "k": [512, 512, 0], "ix": 2, "l": 2 },
"a": { "a": 0, "k": [512, 512, 0], "ix": 1, "l": 2 },
"s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ind": 0,
"ty": "sh",
"ix": 1,
"ks": {
"a": 0,
"k": {
"i": [
[10.007, -17.333],
[0, 0],
[-20.014, 0],
[0, 0],
[10.007, 17.333],
[0, 0]
],
"o": [
[0, 0],
[-10.008, 17.333],
[0, 0],
[20.015, 0],
[0, 0],
[-10.007, -17.333]
],
"v": [
[-22.516, -284.376],
[-338.376, 262.71],
[-315.86, 301.71],
[315.861, 301.71],
[338.378, 262.71],
[22.517, -284.376]
],
"c": true
},
"ix": 2
},
"nm": "Path 1",
"mn": "ADBE Vector Shape - Group",
"hd": false
},
{
"ty": "st",
"c": {
"a": 0,
"k": [0.137254901961, 0.121568634931, 0.125490196078, 1],
"ix": 3
},
"o": { "a": 0, "k": 100, "ix": 4 },
"w": { "a": 0, "k": 48, "ix": 5 },
"lc": 1,
"lj": 1,
"ml": 10,
"bm": 0,
"nm": "Stroke 1",
"mn": "ADBE Vector Graphic - Stroke",
"hd": false
},
{
"ty": "tr",
"p": { "a": 0, "k": [512, 418.652], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100], "ix": 3 },
"r": { "a": 0, "k": 0, "ix": 6 },
"o": { "a": 0, "k": 100, "ix": 7 },
"sk": { "a": 0, "k": 0, "ix": 4 },
"sa": { "a": 0, "k": 0, "ix": 5 },
"nm": "Transform"
}
],
"nm": "Group 1",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}
],
"ip": 0,
"op": 241,
"st": 0,
"bm": 0
},
{
"ddd": 0,
"ind": 2,
"ty": 4,
"nm": "logo/logo-tri-stroke Outlines 3",
"sr": 1,
"ks": {
"o": { "a": 0, "k": 100, "ix": 11 },
"r": {
"a": 1,
"k": [
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 0,
"s": [0]
},
{ "t": 60, "s": [-15] }
],
"ix": 10
},
"p": { "a": 0, "k": [512, 512, 0], "ix": 2, "l": 2 },
"a": { "a": 0, "k": [512, 512, 0], "ix": 1, "l": 2 },
"s": {
"a": 1,
"k": [
{
"i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] },
"o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] },
"t": 0,
"s": [100, 100, 100]
},
{ "t": 60, "s": [66, 66, 100] }
],
"ix": 6,
"l": 2
}
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ind": 0,
"ty": "sh",
"ix": 1,
"ks": {
"a": 0,
"k": {
"i": [
[10.007, -17.333],
[0, 0],
[-20.014, 0],
[0, 0],
[10.007, 17.333],
[0, 0]
],
"o": [
[0, 0],
[-10.008, 17.333],
[0, 0],
[20.015, 0],
[0, 0],
[-10.007, -17.333]
],
"v": [
[-22.516, -284.376],
[-338.376, 262.71],
[-315.86, 301.71],
[315.861, 301.71],
[338.378, 262.71],
[22.517, -284.376]
],
"c": true
},
"ix": 2
},
"nm": "Path 1",
"mn": "ADBE Vector Shape - Group",
"hd": false
},
{
"ty": "st",
"c": {
"a": 0,
"k": [0.137254901961, 0.121568634931, 0.125490196078, 1],
"ix": 3
},
"o": { "a": 0, "k": 100, "ix": 4 },
"w": {
"a": 1,
"k": [
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 0,
"s": [48]
},
{ "t": 60, "s": [53] }
],
"ix": 5
},
"lc": 1,
"lj": 1,
"ml": 10,
"bm": 0,
"nm": "Stroke 1",
"mn": "ADBE Vector Graphic - Stroke",
"hd": false
},
{
"ty": "tr",
"p": { "a": 0, "k": [512, 418.652], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100], "ix": 3 },
"r": { "a": 0, "k": 0, "ix": 6 },
"o": { "a": 0, "k": 100, "ix": 7 },
"sk": { "a": 0, "k": 0, "ix": 4 },
"sa": { "a": 0, "k": 0, "ix": 5 },
"nm": "Transform"
}
],
"nm": "Group 1",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}
],
"ip": 0,
"op": 241,
"st": 0,
"bm": 0
},
{
"ddd": 0,
"ind": 3,
"ty": 4,
"nm": "logo/logo-tri-stroke Outlines 4",
"sr": 1,
"ks": {
"o": { "a": 0, "k": 100, "ix": 11 },
"r": {
"a": 1,
"k": [
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 0,
"s": [0]
},
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 60,
"s": [-15]
},
{ "t": 120, "s": [-30] }
],
"ix": 10
},
"p": { "a": 0, "k": [512, 512, 0], "ix": 2, "l": 2 },
"a": { "a": 0, "k": [512, 512, 0], "ix": 1, "l": 2 },
"s": {
"a": 1,
"k": [
{
"i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] },
"o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] },
"t": 0,
"s": [100, 100, 100]
},
{
"i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] },
"o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] },
"t": 60,
"s": [66, 66, 100]
},
{ "t": 120, "s": [44.5, 44.5, 100] }
],
"ix": 6,
"l": 2
}
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ind": 0,
"ty": "sh",
"ix": 1,
"ks": {
"a": 0,
"k": {
"i": [
[10.007, -17.333],
[0, 0],
[-20.014, 0],
[0, 0],
[10.007, 17.333],
[0, 0]
],
"o": [
[0, 0],
[-10.008, 17.333],
[0, 0],
[20.015, 0],
[0, 0],
[-10.007, -17.333]
],
"v": [
[-22.516, -284.376],
[-338.376, 262.71],
[-315.86, 301.71],
[315.861, 301.71],
[338.378, 262.71],
[22.517, -284.376]
],
"c": true
},
"ix": 2
},
"nm": "Path 1",
"mn": "ADBE Vector Shape - Group",
"hd": false
},
{
"ty": "st",
"c": {
"a": 0,
"k": [0.137254901961, 0.121568634931, 0.125490196078, 1],
"ix": 3
},
"o": { "a": 0, "k": 100, "ix": 4 },
"w": {
"a": 1,
"k": [
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 0,
"s": [48]
},
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 60,
"s": [53]
},
{ "t": 120, "s": [68] }
],
"ix": 5
},
"lc": 1,
"lj": 1,
"ml": 10,
"bm": 0,
"nm": "Stroke 1",
"mn": "ADBE Vector Graphic - Stroke",
"hd": false
},
{
"ty": "tr",
"p": { "a": 0, "k": [512, 418.652], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100], "ix": 3 },
"r": { "a": 0, "k": 0, "ix": 6 },
"o": { "a": 0, "k": 100, "ix": 7 },
"sk": { "a": 0, "k": 0, "ix": 4 },
"sa": { "a": 0, "k": 0, "ix": 5 },
"nm": "Transform"
}
],
"nm": "Group 1",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}
],
"ip": 0,
"op": 241,
"st": 0,
"bm": 0
},
{
"ddd": 0,
"ind": 4,
"ty": 4,
"nm": "logo/logo-tri-stroke Outlines 5",
"sr": 1,
"ks": {
"o": { "a": 0, "k": 100, "ix": 11 },
"r": {
"a": 1,
"k": [
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 0,
"s": [0]
},
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 60,
"s": [-15]
},
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 120,
"s": [-30]
},
{ "t": 180, "s": [-45] }
],
"ix": 10
},
"p": { "a": 0, "k": [512, 512, 0], "ix": 2, "l": 2 },
"a": { "a": 0, "k": [512, 512, 0], "ix": 1, "l": 2 },
"s": {
"a": 1,
"k": [
{
"i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] },
"o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] },
"t": 0,
"s": [100, 100, 100]
},
{
"i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] },
"o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] },
"t": 60,
"s": [66, 66, 100]
},
{
"i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] },
"o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] },
"t": 120,
"s": [44.5, 44.5, 100]
},
{ "t": 180, "s": [30, 30, 100] }
],
"ix": 6,
"l": 2
}
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ind": 0,
"ty": "sh",
"ix": 1,
"ks": {
"a": 0,
"k": {
"i": [
[10.007, -17.333],
[0, 0],
[-20.014, 0],
[0, 0],
[10.007, 17.333],
[0, 0]
],
"o": [
[0, 0],
[-10.008, 17.333],
[0, 0],
[20.015, 0],
[0, 0],
[-10.007, -17.333]
],
"v": [
[-22.516, -284.376],
[-338.376, 262.71],
[-315.86, 301.71],
[315.861, 301.71],
[338.378, 262.71],
[22.517, -284.376]
],
"c": true
},
"ix": 2
},
"nm": "Path 1",
"mn": "ADBE Vector Shape - Group",
"hd": false
},
{
"ty": "st",
"c": {
"a": 0,
"k": [0.137254901961, 0.121568634931, 0.125490196078, 1],
"ix": 3
},
"o": { "a": 0, "k": 100, "ix": 4 },
"w": {
"a": 1,
"k": [
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 0,
"s": [48]
},
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 60,
"s": [53]
},
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 120,
"s": [68]
},
{ "t": 180, "s": [87] }
],
"ix": 5
},
"lc": 1,
"lj": 1,
"ml": 10,
"bm": 0,
"nm": "Stroke 1",
"mn": "ADBE Vector Graphic - Stroke",
"hd": false
},
{
"ty": "tr",
"p": { "a": 0, "k": [512, 418.652], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100], "ix": 3 },
"r": { "a": 0, "k": 0, "ix": 6 },
"o": { "a": 0, "k": 100, "ix": 7 },
"sk": { "a": 0, "k": 0, "ix": 4 },
"sa": { "a": 0, "k": 0, "ix": 5 },
"nm": "Transform"
}
],
"nm": "Group 1",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}
],
"ip": 0,
"op": 241,
"st": 0,
"bm": 0
},
{
"ddd": 0,
"ind": 5,
"ty": 4,
"nm": "logo/logo-tri-stroke Outlines",
"sr": 1,
"ks": {
"o": { "a": 0, "k": 100, "ix": 11 },
"r": {
"a": 1,
"k": [
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 0,
"s": [0]
},
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 60,
"s": [-15]
},
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 120,
"s": [-30]
},
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 180,
"s": [-45]
},
{ "t": 240, "s": [-60] }
],
"ix": 10
},
"p": { "a": 0, "k": [512, 512, 0], "ix": 2, "l": 2 },
"a": { "a": 0, "k": [512, 512, 0], "ix": 1, "l": 2 },
"s": {
"a": 1,
"k": [
{
"i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] },
"o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] },
"t": 0,
"s": [100, 100, 100]
},
{
"i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] },
"o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] },
"t": 60,
"s": [66, 66, 100]
},
{
"i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] },
"o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] },
"t": 120,
"s": [44.5, 44.5, 100]
},
{
"i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] },
"o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] },
"t": 180,
"s": [30, 30, 100]
},
{ "t": 240, "s": [20.6, 20.6, 100] }
],
"ix": 6,
"l": 2
}
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ind": 0,
"ty": "sh",
"ix": 1,
"ks": {
"a": 0,
"k": {
"i": [
[10.007, -17.333],
[0, 0],
[-20.014, 0],
[0, 0],
[10.007, 17.333],
[0, 0]
],
"o": [
[0, 0],
[-10.008, 17.333],
[0, 0],
[20.015, 0],
[0, 0],
[-10.007, -17.333]
],
"v": [
[-22.516, -284.376],
[-338.376, 262.71],
[-315.86, 301.71],
[315.861, 301.71],
[338.378, 262.71],
[22.517, -284.376]
],
"c": true
},
"ix": 2
},
"nm": "Path 1",
"mn": "ADBE Vector Shape - Group",
"hd": false
},
{
"ty": "st",
"c": {
"a": 0,
"k": [0.137254901961, 0.121568634931, 0.125490196078, 1],
"ix": 3
},
"o": { "a": 0, "k": 100, "ix": 4 },
"w": {
"a": 1,
"k": [
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 0,
"s": [48]
},
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 60,
"s": [53]
},
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 120,
"s": [68]
},
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 180,
"s": [87]
},
{ "t": 240, "s": [126] }
],
"ix": 5
},
"lc": 1,
"lj": 1,
"ml": 10,
"bm": 0,
"nm": "Stroke 1",
"mn": "ADBE Vector Graphic - Stroke",
"hd": false
},
{
"ty": "tr",
"p": { "a": 0, "k": [512, 418.652], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100], "ix": 3 },
"r": { "a": 0, "k": 0, "ix": 6 },
"o": { "a": 0, "k": 100, "ix": 7 },
"sk": { "a": 0, "k": 0, "ix": 4 },
"sa": { "a": 0, "k": 0, "ix": 5 },
"nm": "Transform"
}
],
"nm": "Group 1",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}
],
"ip": 0,
"op": 241,
"st": 0,
"bm": 0
}
],
"markers": []
}

View File

@@ -0,0 +1,750 @@
{
"v": "5.9.0",
"fr": 60,
"ip": 0,
"op": 241,
"w": 1024,
"h": 1024,
"nm": "logo-tri white",
"ddd": 0,
"assets": [],
"layers": [
{
"ddd": 0,
"ind": 1,
"ty": 4,
"nm": "logo/logo-tri-stroke Outlines 2",
"sr": 1,
"ks": {
"o": { "a": 0, "k": 100, "ix": 11 },
"r": { "a": 0, "k": 0, "ix": 10 },
"p": { "a": 0, "k": [512, 512, 0], "ix": 2, "l": 2 },
"a": { "a": 0, "k": [512, 512, 0], "ix": 1, "l": 2 },
"s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ind": 0,
"ty": "sh",
"ix": 1,
"ks": {
"a": 0,
"k": {
"i": [
[10.007, -17.333],
[0, 0],
[-20.014, 0],
[0, 0],
[10.007, 17.333],
[0, 0]
],
"o": [
[0, 0],
[-10.008, 17.333],
[0, 0],
[20.015, 0],
[0, 0],
[-10.007, -17.333]
],
"v": [
[-22.516, -284.376],
[-338.376, 262.71],
[-315.86, 301.71],
[315.861, 301.71],
[338.378, 262.71],
[22.517, -284.376]
],
"c": true
},
"ix": 2
},
"nm": "Path 1",
"mn": "ADBE Vector Shape - Group",
"hd": false
},
{
"ty": "st",
"c": { "a": 0, "k": [1, 1, 1, 1], "ix": 3 },
"o": { "a": 0, "k": 100, "ix": 4 },
"w": { "a": 0, "k": 48, "ix": 5 },
"lc": 1,
"lj": 1,
"ml": 10,
"bm": 0,
"nm": "Stroke 1",
"mn": "ADBE Vector Graphic - Stroke",
"hd": false
},
{
"ty": "tr",
"p": { "a": 0, "k": [512, 418.652], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100], "ix": 3 },
"r": { "a": 0, "k": 0, "ix": 6 },
"o": { "a": 0, "k": 100, "ix": 7 },
"sk": { "a": 0, "k": 0, "ix": 4 },
"sa": { "a": 0, "k": 0, "ix": 5 },
"nm": "Transform"
}
],
"nm": "Group 1",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}
],
"ip": 0,
"op": 241,
"st": 0,
"bm": 0
},
{
"ddd": 0,
"ind": 2,
"ty": 4,
"nm": "logo/logo-tri-stroke Outlines 3",
"sr": 1,
"ks": {
"o": { "a": 0, "k": 100, "ix": 11 },
"r": {
"a": 1,
"k": [
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 0,
"s": [0]
},
{ "t": 60, "s": [-15] }
],
"ix": 10
},
"p": { "a": 0, "k": [512, 512, 0], "ix": 2, "l": 2 },
"a": { "a": 0, "k": [512, 512, 0], "ix": 1, "l": 2 },
"s": {
"a": 1,
"k": [
{
"i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] },
"o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] },
"t": 0,
"s": [100, 100, 100]
},
{ "t": 60, "s": [66, 66, 100] }
],
"ix": 6,
"l": 2
}
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ind": 0,
"ty": "sh",
"ix": 1,
"ks": {
"a": 0,
"k": {
"i": [
[10.007, -17.333],
[0, 0],
[-20.014, 0],
[0, 0],
[10.007, 17.333],
[0, 0]
],
"o": [
[0, 0],
[-10.008, 17.333],
[0, 0],
[20.015, 0],
[0, 0],
[-10.007, -17.333]
],
"v": [
[-22.516, -284.376],
[-338.376, 262.71],
[-315.86, 301.71],
[315.861, 301.71],
[338.378, 262.71],
[22.517, -284.376]
],
"c": true
},
"ix": 2
},
"nm": "Path 1",
"mn": "ADBE Vector Shape - Group",
"hd": false
},
{
"ty": "st",
"c": { "a": 0, "k": [1, 1, 1, 1], "ix": 3 },
"o": { "a": 0, "k": 100, "ix": 4 },
"w": {
"a": 1,
"k": [
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 0,
"s": [48]
},
{ "t": 60, "s": [53] }
],
"ix": 5
},
"lc": 1,
"lj": 1,
"ml": 10,
"bm": 0,
"nm": "Stroke 1",
"mn": "ADBE Vector Graphic - Stroke",
"hd": false
},
{
"ty": "tr",
"p": { "a": 0, "k": [512, 418.652], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100], "ix": 3 },
"r": { "a": 0, "k": 0, "ix": 6 },
"o": { "a": 0, "k": 100, "ix": 7 },
"sk": { "a": 0, "k": 0, "ix": 4 },
"sa": { "a": 0, "k": 0, "ix": 5 },
"nm": "Transform"
}
],
"nm": "Group 1",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}
],
"ip": 0,
"op": 241,
"st": 0,
"bm": 0
},
{
"ddd": 0,
"ind": 3,
"ty": 4,
"nm": "logo/logo-tri-stroke Outlines 4",
"sr": 1,
"ks": {
"o": { "a": 0, "k": 100, "ix": 11 },
"r": {
"a": 1,
"k": [
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 0,
"s": [0]
},
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 60,
"s": [-15]
},
{ "t": 120, "s": [-30] }
],
"ix": 10
},
"p": { "a": 0, "k": [512, 512, 0], "ix": 2, "l": 2 },
"a": { "a": 0, "k": [512, 512, 0], "ix": 1, "l": 2 },
"s": {
"a": 1,
"k": [
{
"i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] },
"o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] },
"t": 0,
"s": [100, 100, 100]
},
{
"i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] },
"o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] },
"t": 60,
"s": [66, 66, 100]
},
{ "t": 120, "s": [44.5, 44.5, 100] }
],
"ix": 6,
"l": 2
}
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ind": 0,
"ty": "sh",
"ix": 1,
"ks": {
"a": 0,
"k": {
"i": [
[10.007, -17.333],
[0, 0],
[-20.014, 0],
[0, 0],
[10.007, 17.333],
[0, 0]
],
"o": [
[0, 0],
[-10.008, 17.333],
[0, 0],
[20.015, 0],
[0, 0],
[-10.007, -17.333]
],
"v": [
[-22.516, -284.376],
[-338.376, 262.71],
[-315.86, 301.71],
[315.861, 301.71],
[338.378, 262.71],
[22.517, -284.376]
],
"c": true
},
"ix": 2
},
"nm": "Path 1",
"mn": "ADBE Vector Shape - Group",
"hd": false
},
{
"ty": "st",
"c": { "a": 0, "k": [1, 1, 1, 1], "ix": 3 },
"o": { "a": 0, "k": 100, "ix": 4 },
"w": {
"a": 1,
"k": [
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 0,
"s": [48]
},
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 60,
"s": [53]
},
{ "t": 120, "s": [68] }
],
"ix": 5
},
"lc": 1,
"lj": 1,
"ml": 10,
"bm": 0,
"nm": "Stroke 1",
"mn": "ADBE Vector Graphic - Stroke",
"hd": false
},
{
"ty": "tr",
"p": { "a": 0, "k": [512, 418.652], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100], "ix": 3 },
"r": { "a": 0, "k": 0, "ix": 6 },
"o": { "a": 0, "k": 100, "ix": 7 },
"sk": { "a": 0, "k": 0, "ix": 4 },
"sa": { "a": 0, "k": 0, "ix": 5 },
"nm": "Transform"
}
],
"nm": "Group 1",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}
],
"ip": 0,
"op": 241,
"st": 0,
"bm": 0
},
{
"ddd": 0,
"ind": 4,
"ty": 4,
"nm": "logo/logo-tri-stroke Outlines 5",
"sr": 1,
"ks": {
"o": { "a": 0, "k": 100, "ix": 11 },
"r": {
"a": 1,
"k": [
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 0,
"s": [0]
},
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 60,
"s": [-15]
},
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 120,
"s": [-30]
},
{ "t": 180, "s": [-45] }
],
"ix": 10
},
"p": { "a": 0, "k": [512, 512, 0], "ix": 2, "l": 2 },
"a": { "a": 0, "k": [512, 512, 0], "ix": 1, "l": 2 },
"s": {
"a": 1,
"k": [
{
"i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] },
"o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] },
"t": 0,
"s": [100, 100, 100]
},
{
"i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] },
"o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] },
"t": 60,
"s": [66, 66, 100]
},
{
"i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] },
"o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] },
"t": 120,
"s": [44.5, 44.5, 100]
},
{ "t": 180, "s": [30, 30, 100] }
],
"ix": 6,
"l": 2
}
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ind": 0,
"ty": "sh",
"ix": 1,
"ks": {
"a": 0,
"k": {
"i": [
[10.007, -17.333],
[0, 0],
[-20.014, 0],
[0, 0],
[10.007, 17.333],
[0, 0]
],
"o": [
[0, 0],
[-10.008, 17.333],
[0, 0],
[20.015, 0],
[0, 0],
[-10.007, -17.333]
],
"v": [
[-22.516, -284.376],
[-338.376, 262.71],
[-315.86, 301.71],
[315.861, 301.71],
[338.378, 262.71],
[22.517, -284.376]
],
"c": true
},
"ix": 2
},
"nm": "Path 1",
"mn": "ADBE Vector Shape - Group",
"hd": false
},
{
"ty": "st",
"c": { "a": 0, "k": [1, 1, 1, 1], "ix": 3 },
"o": { "a": 0, "k": 100, "ix": 4 },
"w": {
"a": 1,
"k": [
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 0,
"s": [48]
},
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 60,
"s": [53]
},
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 120,
"s": [68]
},
{ "t": 180, "s": [87] }
],
"ix": 5
},
"lc": 1,
"lj": 1,
"ml": 10,
"bm": 0,
"nm": "Stroke 1",
"mn": "ADBE Vector Graphic - Stroke",
"hd": false
},
{
"ty": "tr",
"p": { "a": 0, "k": [512, 418.652], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100], "ix": 3 },
"r": { "a": 0, "k": 0, "ix": 6 },
"o": { "a": 0, "k": 100, "ix": 7 },
"sk": { "a": 0, "k": 0, "ix": 4 },
"sa": { "a": 0, "k": 0, "ix": 5 },
"nm": "Transform"
}
],
"nm": "Group 1",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}
],
"ip": 0,
"op": 241,
"st": 0,
"bm": 0
},
{
"ddd": 0,
"ind": 5,
"ty": 4,
"nm": "logo/logo-tri-stroke Outlines",
"sr": 1,
"ks": {
"o": { "a": 0, "k": 100, "ix": 11 },
"r": {
"a": 1,
"k": [
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 0,
"s": [0]
},
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 60,
"s": [-15]
},
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 120,
"s": [-30]
},
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 180,
"s": [-45]
},
{ "t": 240, "s": [-60] }
],
"ix": 10
},
"p": { "a": 0, "k": [512, 512, 0], "ix": 2, "l": 2 },
"a": { "a": 0, "k": [512, 512, 0], "ix": 1, "l": 2 },
"s": {
"a": 1,
"k": [
{
"i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] },
"o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] },
"t": 0,
"s": [100, 100, 100]
},
{
"i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] },
"o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] },
"t": 60,
"s": [66, 66, 100]
},
{
"i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] },
"o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] },
"t": 120,
"s": [44.5, 44.5, 100]
},
{
"i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] },
"o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] },
"t": 180,
"s": [30, 30, 100]
},
{ "t": 240, "s": [20.6, 20.6, 100] }
],
"ix": 6,
"l": 2
}
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ind": 0,
"ty": "sh",
"ix": 1,
"ks": {
"a": 0,
"k": {
"i": [
[10.007, -17.333],
[0, 0],
[-20.014, 0],
[0, 0],
[10.007, 17.333],
[0, 0]
],
"o": [
[0, 0],
[-10.008, 17.333],
[0, 0],
[20.015, 0],
[0, 0],
[-10.007, -17.333]
],
"v": [
[-22.516, -284.376],
[-338.376, 262.71],
[-315.86, 301.71],
[315.861, 301.71],
[338.378, 262.71],
[22.517, -284.376]
],
"c": true
},
"ix": 2
},
"nm": "Path 1",
"mn": "ADBE Vector Shape - Group",
"hd": false
},
{
"ty": "st",
"c": { "a": 0, "k": [1, 1, 1, 1], "ix": 3 },
"o": { "a": 0, "k": 100, "ix": 4 },
"w": {
"a": 1,
"k": [
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 0,
"s": [48]
},
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 60,
"s": [53]
},
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 120,
"s": [68]
},
{
"i": { "x": [0.833], "y": [0.833] },
"o": { "x": [0.167], "y": [0.167] },
"t": 180,
"s": [87]
},
{ "t": 240, "s": [126] }
],
"ix": 5
},
"lc": 1,
"lj": 1,
"ml": 10,
"bm": 0,
"nm": "Stroke 1",
"mn": "ADBE Vector Graphic - Stroke",
"hd": false
},
{
"ty": "tr",
"p": { "a": 0, "k": [512, 418.652], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100], "ix": 3 },
"r": { "a": 0, "k": 0, "ix": 6 },
"o": { "a": 0, "k": 100, "ix": 7 },
"sk": { "a": 0, "k": 0, "ix": 4 },
"sa": { "a": 0, "k": 0, "ix": 5 },
"nm": "Transform"
}
],
"nm": "Group 1",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}
],
"ip": 0,
"op": 241,
"st": 0,
"bm": 0
}
],
"markers": []
}

View File

@@ -0,0 +1,56 @@
import { lottieAtom } from '@affine/jotai';
import { useAtomValue } from 'jotai';
import type { FC } from 'react';
import { useEffect, useRef } from 'react';
type CustomLottieProps = {
options: {
loop?: boolean | number | undefined;
autoplay?: boolean | undefined;
animationData: any;
rendererSettings?: {
preserveAspectRatio?: string | undefined;
};
};
isStopped?: boolean | undefined;
speed?: number | undefined;
width?: number | string | undefined;
height?: number | string | undefined;
};
export const InternalLottie: FC<CustomLottieProps> = ({
options,
isStopped,
speed,
width,
height,
}) => {
const element = useRef<HTMLDivElement>(null);
const lottieInstance = useRef<any>();
const lottie = useAtomValue(lottieAtom);
useEffect(() => {
if (element.current) {
lottieInstance.current = lottie.loadAnimation({
...options,
container: element.current,
});
}
return () => {
lottieInstance.current?.destroy();
};
}, [lottie, options]);
useEffect(() => {
if (speed) {
lottieInstance.current?.setSpeed(speed);
}
if (isStopped) {
lottieInstance.current?.stop();
} else {
lottieInstance.current?.play();
}
}, [isStopped, speed]);
return <div ref={element} style={{ width, height }}></div>;
};

View File

@@ -0,0 +1,10 @@
import type { StoryFn } from '@storybook/react';
import { AffineLoading } from '../components/affine-loading';
export default {
title: 'AFFiNE/Loading',
component: AffineLoading,
};
export const Default: StoryFn = () => <AffineLoading />;