gaoyunchuan/wxmp
1
0
Fork 0
mirror of https://github.com/jaywcjlove/wxmp.git synced 2026-01-12 00:08:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add api request loading animation.

Browse Source
This commit is contained in:
jaywcjlove
2022-09-03 17:12:31 +08:00
parent b1dc77e98b
commit fd6ad59d5c
3 changed files with 47 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/assets/tail-spin.svg Normal file
View File

@@ -0,0 +1,29 @@
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 105 105" fill="currentColor">
<circle cx="12.5" cy="12.5" r="12.5">
<animate attributeName="fill-opacity" begin="0s" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/>
</circle>
<circle cx="12.5" cy="52.5" r="12.5" fill-opacity=".5">
<animate attributeName="fill-opacity" begin="100ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/>
</circle>
<circle cx="52.5" cy="12.5" r="12.5">
<animate attributeName="fill-opacity" begin="300ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/>
</circle>
<circle cx="52.5" cy="52.5" r="12.5">
<animate attributeName="fill-opacity" begin="600ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/>
</circle>
<circle cx="92.5" cy="12.5" r="12.5">
<animate attributeName="fill-opacity" begin="800ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/>
</circle>
<circle cx="92.5" cy="52.5" r="12.5">
<animate attributeName="fill-opacity" begin="400ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/>
</circle>
<circle cx="12.5" cy="92.5" r="12.5">
<animate attributeName="fill-opacity" begin="700ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/>
</circle>
<circle cx="52.5" cy="92.5" r="12.5">
<animate attributeName="fill-opacity" begin="500ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/>
</circle>
<circle cx="92.5" cy="92.5" r="12.5">
<animate attributeName="fill-opacity" begin="200ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/>
</circle>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

5
src/components/Layout.tsx
View File

@@ -1,8 +1,11 @@
import styled from 'styled-components'; import styled from 'styled-components';
import { Outlet, NavLink } from 'react-router-dom'; import { Outlet, NavLink } from 'react-router-dom';
import '@wcj/dark-mode'; import '@wcj/dark-mode';
import { useContext } from 'react';
import { ReactComponent as LogoIcon } from '../assets/logo.svg'; import { ReactComponent as LogoIcon } from '../assets/logo.svg';
import { ReactComponent as GithubIcon } from '../assets/github.svg'; import { ReactComponent as GithubIcon } from '../assets/github.svg';
import { ReactComponent as Loading } from '../assets/tail-spin.svg';
import { Context } from '../store/context';
const Warpper = styled.div``; const Warpper = styled.div``;
@@ -75,6 +78,7 @@ const Section = styled.section`
`; `;
export function Layout() { export function Layout() {
const { isLoading } = useContext(Context);
return ( return (
<Warpper className="wmde-markdown-color"> <Warpper className="wmde-markdown-color">
<Header> <Header>
@@ -84,6 +88,7 @@ export function Layout() {
微信公众号排版编辑器 微信公众号排版编辑器
<sup> v{VERSION} </sup> <sup> v{VERSION} </sup>
</Title> </Title>
{isLoading && <Loading />}
</Article> </Article>
<Section> <Section>
<NavLink to="/">首页</NavLink> <NavLink to="/">首页</NavLink>

13
src/store/getMdSource.ts → src/store/getMdSource.tsx
View File

@@ -1,4 +1,10 @@
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import toast from 'react-hot-toast';
import styled from 'styled-components';
const Warpper = styled.div`
font-size: 0.8rem;
`;
export const useMdSource = (url: string | null) => { export const useMdSource = (url: string | null) => {
return useQuery(['database-list', url], () => { return useQuery(['database-list', url], () => {
@@ -7,6 +13,13 @@ export const useMdSource = (url: string | null) => {
.then((response) => response.text()) .then((response) => response.text())
.then((data) => { .then((data) => {
return data; return data;
})
.catch((err) => {
toast.error(
<Warpper>
加载失败！<a href={url}>请检查你的URL</a>
</Warpper>,
);
}); });
}); });
}; };