Add animations to loaders.

src/pages/RevoltApp.tsx

@@ -34,13 +34,15 @@ const Routes = styled.div`
 export default function App() {
     const path = useLocation().pathname;
     const fixedBottomNav = (path === '/' || path === '/settings' || path.startsWith("/friends"));
+    const inSettings = path === '/settings';
+    const inChannel = path.includes('/channel');
 
     return (
         <OverlappingPanels
             width="100vw"
             height="100vh"
-            leftPanel={{ width: 292, component: <LeftSidebar /> }}
-            rightPanel={{ width: 240, component: <RightSidebar /> }}
+            leftPanel={inSettings ? undefined : { width: 292, component: <LeftSidebar /> }}
+            rightPanel={(!inSettings && inChannel) ? { width: 240, component: <RightSidebar /> } : undefined}
             bottomNav={{
                 component: <BottomNavigation />,
                 showIf: fixedBottomNav ? ShowIf.Always : ShowIf.Left,

src/pages/app.tsx

@@ -12,7 +12,7 @@ export function App() {
         <Context>
             {/* 
             // @ts-expect-error */}
-            <Suspense fallback={<Preloader />}>
+            <Suspense fallback={<Preloader type="spinner" />}>
                 <Switch>
                     <Route path="/login">
                         <CheckAuth>

src/pages/channels/messaging/MessageArea.tsx

@@ -215,10 +215,10 @@ export function MessageArea({ id }: Props) {
         <MessageAreaWidthContext.Provider value={(width ?? 0) - MESSAGE_AREA_PADDING}>
             <Area ref={ref}>
                 <div>
-                    {state.type === "LOADING" && <Preloader />}
+                    {state.type === "LOADING" && <Preloader type="ring" />}
                     {state.type === "WAITING_FOR_NETWORK" && (
                         <RequiresOnline>
-                            <Preloader />
+                            <Preloader type="ring" />
                         </RequiresOnline>
                     )}
                     {state.type === "RENDER" && (

src/pages/channels/messaging/MessageRenderer.tsx

@@ -60,7 +60,7 @@ function MessageRenderer({ id, state, queue }: Props) {
     } else {
         render.push(
             <RequiresOnline>
-                <Preloader />
+                <Preloader type="ring" />
             </RequiresOnline>
         );
     }
@@ -148,7 +148,7 @@ function MessageRenderer({ id, state, queue }: Props) {
     } else {
         render.push(
             <RequiresOnline>
-                <Preloader />
+                <Preloader type="ring" />
             </RequiresOnline>
         );
     }

src/pages/invite/Invite.tsx

@@ -34,7 +34,7 @@ export default function Invite() {
             <div className={styles.preloader}>
                 <RequiresOnline>
                     { error ? <Overline type="error" error={error} />
-                        : <Preloader /> }
+                        : <Preloader type="spinner" /> }
                 </RequiresOnline>
             </div>
         )
@@ -52,7 +52,7 @@ export default function Invite() {
                 </div> }
 
             <div className={styles.details}>
-                { processing ? <Preloader /> :
+                { processing ? <Preloader type="ring" /> :
                     <>
                         <h1>{ invite.server_name }</h1>
                         <h2>#{invite.channel_name}</h2>

src/pages/login/forms/CaptchaBlock.tsx

@@ -20,7 +20,7 @@ export function CaptchaBlock(props: CaptchaProps) {
     }, []);
 
     if (!client.configuration?.features.captcha.enabled)
-        return <Preloader />;
+        return <Preloader type="spinner" />;
 
     return (
         <div>

src/pages/login/forms/Form.tsx

@@ -138,7 +138,7 @@ export function Form({ page, callback }: Props) {
     }
 
     if (captcha) return <CaptchaBlock {...captcha} />;
-    if (loading) return <Preloader />;
+    if (loading) return <Preloader type="spinner" />;
 
     return (
         <div className={styles.form}>

src/pages/settings/panes/Sessions.tsx

@@ -55,7 +55,7 @@ export function Sessions() {
     if (typeof sessions === "undefined") {
         return (
             <div className={styles.loader}>
-                <Preloader />
+                <Preloader type="ring" />
             </div>
         );
     }

src/pages/settings/server/Invites.tsx

@@ -27,7 +27,7 @@ export function Invites({ server }: Props) {
 
     return (
         <div className={styles.invites}>
-            { typeof invites === 'undefined' && <Preloader /> }
+            { typeof invites === 'undefined' && <Preloader type="ring" /> }
             {
                 invites?.map(
                     invite => {