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
Diffstat (limited to '')
-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