aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorGravatar Joe Banks <[email protected]>2024-07-10 04:49:51 +0100
committerGravatar Joe Banks <[email protected]>2024-07-10 04:49:51 +0100
commitde5b5ecfa445e09867bc4398da94d83fea7912c3 (patch)
treeea12b418ea2ba2683b15098de757fe686051714f
parentImprove the styles on the radio component to make it easier to use (diff)
Prevent flash of huge loading bar on suspense loaded routes
-rw-r--r--src/App.tsx23
-rw-r--r--src/images/logo.svg78
2 files changed, 95 insertions, 6 deletions
diff --git a/src/App.tsx b/src/App.tsx
index d622840..2738090 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,6 +11,8 @@ import AuthorizationSplash from "./components/AuthorizationSplash";
import { CSSTransition, TransitionGroup } from "react-transition-group";
+import Logo from "./images/logo.svg";
+
import globalStyles from "./globalStyles";
import NotFound from "./pages/NotFound";
@@ -24,13 +26,22 @@ const routes = [
{ path: "/callback", Component: CallbackPage }
];
+const pageLoadingStyles = css`
+display: flex;
+justify-content: center;
+margin-top: 10%;
+align-items: center;
+flex-direction: column;
+
+svg {
+ transform: scale(0.35);
+}
+`;
+
function PageLoading() {
- return <div css={css`
- display: flex;
- justify-content: center;
- margin-top: 50px;
- `}>
- <PropagateLoader color="white" size={100}/>
+ return <div css={pageLoadingStyles}>
+ <Logo/>
+ <PropagateLoader color="white"/>
</div>;
}
diff --git a/src/images/logo.svg b/src/images/logo.svg
new file mode 100644
index 0000000..b173ff1
--- /dev/null
+++ b/src/images/logo.svg
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xml:space="preserve"
+ viewBox="0 0 463.86203 463.86203"
+ y="0px"
+ x="0px"
+ id="svg8"
+ version="1.1"
+ sodipodi:docname="logo_discord.svg"
+ inkscape:version="0.91 r13725"
+ width="463.86203"
+ height="463.86203"><sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="930"
+ inkscape:window-height="1028"
+ id="namedview3457"
+ showgrid="false"
+ inkscape:zoom="0.62676883"
+ inkscape:cx="196.865"
+ inkscape:cy="252.33859"
+ inkscape:window-x="991"
+ inkscape:window-y="24"
+ inkscape:window-maximized="0"
+ inkscape:current-layer="svg8"
+ fit-margin-top="0"
+ fit-margin-left="0"
+ fit-margin-right="0"
+ fit-margin-bottom="0" /><metadata
+ id="metadata1124"><rdf:RDF><cc:Work
+ rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+ id="defs1122" /><style
+ id="style1081"
+ type="text/css">
+ .st0{fill:#7289DA;}
+ .st1{fill:#5B6DAE;}
+ .st2{fill:#CAD6FF;}
+ .st3{fill:#FFFFFF;}
+</style><rect
+ ry="52.765873"
+ y="0"
+ x="0"
+ height="463.86203"
+ width="463.86203"
+ id="rect1995"
+ style="opacity:1;fill:#7289da;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+ inkscape:label="background" /><path
+ id="path5041-2"
+ d="m 296.0867,80.929195 -11.50586,3.30859 c -12.22293,-1.80512 -24.75727,-2.59705 -36.89453,-2.50781 -13.5,0.1 -26.49844,1.19922 -37.89844,3.19922 -3.69979,0.65161 -7.04735,1.38596 -10.10742,2.19922 l -35.89259,0 0,18.800785 4.5,0 0,7.69922 2.7832,0 c -0.63936,3.71421 -0.88476,7.79967 -0.88476,12.30078 l 0,4 -15.39844,0 -2.20117,11 17.59961,15.01367 0,0.0859 79.20118,0 0,10 -79.20118,0 -29.69922,0 c -23,0 -43.200005,13.8 -49.500005,40 -7.3,30 -7.6,48.80117 0,80.20117 0.49734,2.07815 1.06052,4.09848 1.6836,6.0625 l -1.1836,10.43754 13.345715,11.54883 c 7.03195,7.51033 16.37109,11.95117 28.2539,11.95117 l 27.20117,0 0,-36 c 0,-26 22.6,-49 49.50001,-49 l 79.19922,0 c 22,0 39.59961,-18.10156 39.59961,-40.10156 l 0,-75.19922 c 0,-12.89964 -6.58193,-23.83117 -16.51563,-31.273445 z m 76.80078,77.599615 -14.30078,7.40039 -20.09961,0 0,0.0996 0,10.30078 0,24.69922 c 0,27.2 -23.1,50 -49.5,50 l -79.09961,0 c -21.7,0 -39.59962,18.49961 -39.59962,40.09961 l 0,75.10156 c 0,21.4 18.69962,33.99961 39.59962,40.09961 25.1,7.3 49.09961,8.7 79.09961,0 19.9,-5.7 39.59961,-17.29961 39.59961,-40.09961 l 0,-27.90039 0,-2.09961 0,-0.10156 -0.11914,0 -11.7207,-10 11.83984,0 39.59961,0 c 23,0 31.60156,-16 39.60156,-40 8.3,-24.7 7.9,-48.49922 0,-80.19922 -3.62263,-14.49052 -9.35252,-26.7105 -18.94726,-33.69922 z m -123.40039,167.59961 57.5,0 0,10 -57.5,0 z"
+ style="display:inline;fill:#000000;fill-opacity:0.20554271"
+ inkscape:connector-curvature="0"
+ inkscape:label="shadow" /><path
+ style="display:inline;fill:#cbd6ff;fill-opacity:1"
+ d="m 229.98709,66.629155 c -13.5,0.1 -26.5,1.2 -37.9,3.2 -33.5,5.9 -39.6,18.2 -39.6,41.000005 l 0,30.1 79.2,0 0,10 -79.2,0 -29.7,0 c -23.000005,0 -43.200005,13.8 -49.500005,40 -7.3,30 -7.6,48.8 0,80.2 5.6,23.4 19.1,40 42.100005,40 l 27.2,0 0,-36 c 0,-26 22.6,-49 49.5,-49 l 79.1,0 c 22,0 39.6,-18.1 39.6,-40.1 l 0,-75.2 c 0,-21.400005 -18.1,-37.400005 -39.6,-41.000005 -13.5,-2.3 -27.6,-3.3 -41.2,-3.2 z m -42.8,24.2 c 8.2,0 14.9,6.8 14.9,15.100005 0,8.3 -6.7,15 -14.9,15 -8.2,0 -14.9,-6.7 -14.9,-15 0,-8.400005 6.7,-15.100005 14.9,-15.100005 z"
+ class="st2"
+ id="path1948"
+ inkscape:connector-curvature="0"
+ inkscape:label="upper_snake" /><path
+ style="display:inline;fill:#ffffff"
+ d="m 320.78709,150.92916 0,35 c 0,27.2 -23.1,50 -49.5,50 l -79.1,0 c -21.7,0 -39.6,18.5 -39.6,40.1 l 0,75.1 c 0,21.4 18.7,34 39.6,40.1 25.1,7.3 49.1,8.7 79.1,0 19.9,-5.7 39.6,-17.3 39.6,-40.1 l 0,-30.1 -79.1,0 0,-10 79.1,0 39.6,0 c 23,0 31.6,-16 39.6,-40 8.3,-24.7 7.9,-48.5 0,-80.2 -5.7,-22.8 -16.6,-40 -39.6,-40 l -29.7,0 z m -44.5,190.2 c 8.2,0 14.9,6.7 14.9,15 0,8.3 -6.7,15.1 -14.9,15.1 -8.2,0 -14.9,-6.8 -14.9,-15.1 0,-8.3 6.7,-15 14.9,-15 z"
+ class="st3"
+ id="path1950"
+ inkscape:connector-curvature="0"
+ inkscape:label="lower_snake" /></svg> \ No newline at end of file