diff --git a/WARP.md b/WARP.md new file mode 100644 index 000000000..35af6aba2 --- /dev/null +++ b/WARP.md @@ -0,0 +1,83 @@ +# WARP.md + +This file provides guidance to WARP (warp.dev) when working with code in this repository. + +## Development Commands + +### Core Development +- **Start development server**: `yarn start` (runs on port 8001) +- **Clean and restart**: `yarn clean && yarn && yarn start` (when things get weird) +- **Build production**: `yarn build` +- **Serve production build locally**: `gatsby build && gatsby serve` +- **Clean build cache**: `gatsby clean` + +### Code Quality +- **Format code**: `yarn format` (formats all HTML, JS, TS, TSX, JSON, YML, CSS, SCSS) +- **Format docs specifically**: `yarn format:docs` (fixes MDX formatting for changed files) +- **Run tests**: `yarn test-redirects` (tests redirect configuration) +- **Check links after build**: `yarn check-links-post-build` + +### Content & Assets +- **Update SVG sprite**: `yarn update-sprite` (for product feature icons) +- **Generate TypeScript types**: `yarn typegen` (for Kea logic) + +### Storybook +- **Run Storybook**: `yarn storybook` (port 6006) +- **Build Storybook**: `yarn build-storybook` + +## Architecture Overview + +### Desktop OS-Style Website +PostHog.com is designed as a desktop operating system experience in the browser: +- **Desktop Environment**: The main interface (`src/components/Desktop/index.tsx`) renders a macOS-style desktop with draggable icons +- **Window Management**: Pages open in draggable, resizable windows (`src/components/AppWindow/index.tsx`) that can be maximized, minimized, or snapped +- **Multi-Window Support**: Users can have multiple windows open simultaneously with a windows panel to manage them +- **Global State**: Window management and app state handled by `src/context/App.tsx` + +### Content Architecture +- **Gatsby Static Site**: Built with Gatsby 4.25.9, hosted on Vercel +- **MDX Content**: All content stored in `/contents/` directory (docs, blog, handbook, tutorials, etc.) +- **Multi-Product Structure**: PostHog is multi-product, with product data centralized in hooks (`useProduct.ts`, `useProducts.tsx`) +- **Customer Data**: Customer information centralized in `useCustomers.ts` +- **Navigation**: All navigation menus defined in `src/navs/index.js` + +### Key Integrations +- **Squeak Forum**: In-house community forum integration +- **Ashby Jobs**: Job listings via Ashby integration +- **Shopify Merch Store**: Headless Shopify integration for merchandise +- **Algolia Search**: Site-wide search functionality +- **PostHog Analytics**: Self-hosted analytics (naturally) + +### Component Structure +- **Radix UI**: Custom Radix components in `/src/components/RadixUI/` with "Radix" prefix for imports +- **OS Components**: Custom-built components prefixed with "OS" (OSButton, OSFieldset, OSIcons, OSTable, OSTabs) +- **App Components**: Desktop "apps" like ReaderView, Wizard, Explorer for different content types + +### Styling +- **Tailwind CSS**: Primary styling system with custom color schemes +- **Three Color Schemes**: Primary/secondary/tertiary with light/dark mode support +- **Design System**: Consistent spacing, colors defined in `tailwind.config.js` +- **Custom CSS**: Additional styles in `src/styles/global.css` + +## Environment Setup +- **Node**: Version 22.x required (use `nvm use` if available) +- **Package Manager**: Yarn (not npm) +- **Port**: Development server runs on 8001 (not default 8000) +- **Apple Silicon**: May need to install vips (`brew install vips`) and remove node_modules + +## Working with Content +- **Content Location**: All written content in `/contents/` directory +- **Product Data**: Check `useProduct.ts` first, then `useProducts.tsx` for product information +- **Customer References**: Use `useCustomers.ts` for customer data (names, logos, quotes) +- **Navigation Changes**: Modify `src/navs/index.js` but note it's shared with live site + +## API Integrations +- **Local PostHog API**: Override schema URL with `POSTHOG_OPEN_API_SPEC_URL` env var +- **External Services**: Require API keys for Ashby (jobs), GitHub (contributors), Shopify (merch) +- **Development**: Most features work without API keys, but some require environment variables + +## Build & Deployment +- **Vercel Hosting**: Deployed via Vercel with branch previews +- **Build Process**: Gatsby build with custom post-build processing +- **Redirects**: Test redirect configuration with Jest +- **Performance**: Uses Cloudinary for image optimization and lazy loading \ No newline at end of file diff --git a/gatsby-ssr.js b/gatsby-ssr.js index deba977ab..8b687c5bd 100644 --- a/gatsby-ssr.js +++ b/gatsby-ssr.js @@ -28,13 +28,20 @@ export const wrapPageElement = ({ element, props: { location } }) => { ) } -export const onRenderBody = function ({ setPreBodyComponents }) { +export const onRenderBody = function ({ setPreBodyComponents, setPostBodyComponents }) { setPreBodyComponents([ React.createElement('script', { key: 'dark-mode', src: '/scripts/theme-init.js', }), ]) + + setPostBodyComponents([ + React.createElement('script', { + key: 'initial-loader', + src: '/scripts/initial-loader.js', + }), + ]) } export const onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }) => { diff --git a/src/components/Desktop/HourglassSpinner.tsx b/src/components/Desktop/HourglassSpinner.tsx new file mode 100644 index 000000000..1615b8f86 --- /dev/null +++ b/src/components/Desktop/HourglassSpinner.tsx @@ -0,0 +1,90 @@ +import React from 'react' + +export default function HourglassSpinner({ className = '' }: { className?: string }) { + return ( + + + {/* Hourglass outline */} + + {/* Top sand - triangle filling top chamber */} + + {/* Bottom sand - triangle filling bottom chamber */} + + + ) +} diff --git a/src/components/Desktop/index.tsx b/src/components/Desktop/index.tsx index 7407fba89..34761b900 100644 --- a/src/components/Desktop/index.tsx +++ b/src/components/Desktop/index.tsx @@ -16,7 +16,9 @@ import { motion } from 'framer-motion' import { DebugContainerQuery } from 'components/DebugContainerQuery' import HedgeHogModeEmbed from 'components/HedgehogMode' import ReactConfetti from 'react-confetti' +import ProgressBar from 'components/ProgressBar' import OSButton from 'components/OSButton' +import HourglassSpinner from './HourglassSpinner' interface Product { name: string @@ -191,6 +193,17 @@ const validateIconPositions = ( return true } +const LOADING_MESSAGES = [ + 'Booting the PostHog experience', + 'Compiling hedgehog shaders', + 'Rebuilding webpack', + 'Hydrating the hedgehogs', + 'Sourcing and transforming nodes', + <> + Running yarn serve + , +] + export default function Desktop() { const productLinks = useProductLinks() const { @@ -209,6 +222,8 @@ export default function Desktop() { }) const [rendered, setRendered] = useState(false) const { getWallpaperClasses } = useTheme() + const [currentMessageIndex, setCurrentMessageIndex] = useState(0) + const [isMessageExiting, setIsMessageExiting] = useState(false) function generateInitialPositions(): IconPositions { const positions: IconPositions = {} @@ -265,6 +280,12 @@ export default function Desktop() { } useEffect(() => { + // Hide the initial SSR loader once React has hydrated + const initialLoader = document.getElementById('initial-loader') + if (initialLoader) { + initialLoader.style.display = 'none' + } + const savedPositions = localStorage.getItem(STORAGE_KEY) if (savedPositions) { try { @@ -300,6 +321,21 @@ export default function Desktop() { } }, [posthogInstance]) + useEffect(() => { + if (rendered) return + + const interval = setInterval(() => { + setIsMessageExiting(true) + + setTimeout(() => { + setCurrentMessageIndex((prev) => (prev + 1) % LOADING_MESSAGES.length) + setIsMessageExiting(false) + }, 300) + }, 1000) + + return () => clearInterval(interval) + }, [rendered, currentMessageIndex]) + const handlePositionChange = (appLabel: string, position: IconPosition) => { const newPositions = { ...iconPositions, [appLabel]: position } setIconPositions(newPositions) @@ -544,6 +580,26 @@ export default function Desktop() { /> )} + {!rendered && ( +
+
+ +
+ + {LOADING_MESSAGES[currentMessageIndex]} + +
+
+
+ )} ) } diff --git a/src/components/Desktop/lottieAnimations.ts b/src/components/Desktop/lottieAnimations.ts new file mode 100644 index 000000000..5606fc122 --- /dev/null +++ b/src/components/Desktop/lottieAnimations.ts @@ -0,0 +1,1669 @@ +// Inlined Lottie animation data for fast loading +// These are critical for the loading state, so we inline them to avoid network requests + +export const hourglassAnimation = { + v: '5.6.5', + fr: 24, + ip: 0, + op: 28, + w: 30, + h: 30, + nm: 'hourglass', + ddd: 0, + assets: [], + layers: [ + { + ddd: 0, + ind: 1, + ty: 4, + nm: 'middle Outlines', + sr: 1, + ks: { + o: { a: 0, k: 100, ix: 11 }, + r: { a: 0, k: 0, ix: 10 }, + p: { a: 0, k: [15, 15.5, 0], ix: 2 }, + a: { a: 0, k: [1, 5.5, 0], ix: 1 }, + s: { a: 0, k: [100, 100, 100], ix: 6 }, + }, + ao: 0, + shapes: [ + { + ty: 'gr', + it: [ + { + ind: 0, + ty: 'sh', + ix: 1, + ks: { + a: 0, + k: { + i: [ + [0, 0], + [0, 0], + ], + o: [ + [0, 0], + [0, 0], + ], + v: [ + [1, 2.188], + [1, 11], + ], + c: false, + }, + ix: 2, + }, + nm: 'Path 1', + mn: 'ADBE Vector Shape - Group', + hd: false, + }, + { + ty: 'st', + c: { a: 0, k: [0, 0, 0, 1], ix: 3 }, + o: { a: 0, k: 100, ix: 4 }, + w: { a: 0, k: 2, ix: 5 }, + lc: 2, + lj: 2, + bm: 0, + nm: 'Stroke 1', + mn: 'ADBE Vector Graphic - Stroke', + hd: false, + }, + { + ty: 'tr', + p: { a: 0, k: [0, 0], 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, + }, + { + ty: 'tm', + s: { + a: 1, + k: [ + { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 18, s: [0] }, + { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 22, s: [0] }, + { t: 25, s: [100] }, + ], + ix: 1, + }, + e: { + a: 1, + k: [ + { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 18, s: [0] }, + { t: 22, s: [100] }, + ], + ix: 2, + }, + o: { a: 0, k: 0, ix: 3 }, + m: 1, + ix: 2, + nm: 'Trim Paths 1', + mn: 'ADBE Vector Filter - Trim', + hd: false, + }, + ], + ip: 0, + op: 28, + st: 0, + bm: 0, + }, + { + ddd: 0, + ind: 2, + ty: 4, + nm: 'hourglass Outlines', + sr: 1, + ks: { + o: { a: 0, k: 100, ix: 11 }, + r: { + a: 1, + k: [ + { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 3, s: [0] }, + { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 5, s: [40] }, + { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 9, s: [193] }, + { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 11, s: [180] }, + { t: 18, s: [180] }, + ], + ix: 10, + }, + p: { a: 0, k: [15, 15, 0], ix: 2 }, + a: { a: 0, k: [12, 16, 0], ix: 1 }, + s: { + a: 1, + k: [ + { + i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, + o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, + t: 3, + s: [100, 100, 100], + }, + { + i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, + o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, + t: 5, + s: [90, 90, 100], + }, + { + i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, + o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, + t: 9, + s: [90, 90, 100], + }, + { + i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, + o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, + t: 11, + s: [100, 100, 100], + }, + { t: 18, s: [100, 100, 100] }, + ], + ix: 6, + }, + }, + ao: 0, + shapes: [ + { + ty: 'gr', + it: [ + { + ind: 0, + ty: 'sh', + ix: 1, + ks: { + a: 0, + k: { + i: [ + [0, 0], + [0, 0], + [0, 0], + [0, 0], + ], + o: [ + [0, 0], + [0, 0], + [0, 0], + [0, 0], + ], + v: [ + [-7, -2], + [7, -2], + [7, 2], + [-7, 2], + ], + c: true, + }, + ix: 2, + }, + nm: 'Path 1', + mn: 'ADBE Vector Shape - Group', + hd: false, + }, + { + ty: 'fl', + c: { a: 0, k: [0, 0, 0, 1], ix: 4 }, + o: { a: 0, k: 100, ix: 5 }, + r: 1, + bm: 0, + nm: 'Fill 1', + mn: 'ADBE Vector Graphic - Fill', + hd: false, + }, + { + ty: 'tr', + p: { a: 0, k: [12, 25], 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, + }, + { + ty: 'gr', + it: [ + { + ind: 0, + ty: 'sh', + ix: 1, + ks: { + a: 0, + k: { + i: [ + [0, 0], + [0, 0], + [0, 0], + [0, 0], + ], + o: [ + [0, 0], + [0, 0], + [0, 0], + [0, 0], + ], + v: [ + [-7, -2], + [7, -2], + [7, 2], + [-7, 2], + ], + c: true, + }, + ix: 2, + }, + nm: 'Path 1', + mn: 'ADBE Vector Shape - Group', + hd: false, + }, + { + ty: 'fl', + c: { a: 0, k: [0, 0, 0, 1], ix: 4 }, + o: { a: 0, k: 100, ix: 5 }, + r: 1, + bm: 0, + nm: 'Fill 1', + mn: 'ADBE Vector Graphic - Fill', + hd: false, + }, + { + ty: 'tr', + p: { a: 0, k: [12, 7], 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 2', + np: 2, + cix: 2, + bm: 0, + ix: 2, + mn: 'ADBE Vector Group', + hd: false, + }, + { + ty: 'gr', + it: [ + { + ind: 0, + ty: 'sh', + ix: 1, + ks: { + a: 0, + k: { + i: [ + [0, 0], + [0, 0], + [0, 0], + [0, 5], + [0, 0], + ], + o: [ + [0, 0], + [0, -5], + [0, 0], + [0, 0], + [0, 0], + ], + v: [ + [2.5, 11], + [2.5, 8], + [-2.5, 0], + [2.5, -8], + [2.5, -11], + ], + c: false, + }, + ix: 2, + }, + nm: 'Path 1', + mn: 'ADBE Vector Shape - Group', + hd: false, + }, + { + ty: 'st', + c: { a: 0, k: [0, 0, 0, 1], ix: 3 }, + o: { a: 0, k: 100, ix: 4 }, + w: { a: 0, k: 2, ix: 5 }, + lc: 2, + lj: 2, + bm: 0, + nm: 'Stroke 1', + mn: 'ADBE Vector Graphic - Stroke', + hd: false, + }, + { + ty: 'tr', + p: { a: 0, k: [16.5, 16.001], 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 3', + np: 2, + cix: 2, + bm: 0, + ix: 3, + mn: 'ADBE Vector Group', + hd: false, + }, + { + ty: 'gr', + it: [ + { + ind: 0, + ty: 'sh', + ix: 1, + ks: { + a: 0, + k: { + i: [ + [0, 0], + [0, 0], + [0, 0], + [0, -5], + [0, 0], + ], + o: [ + [0, 0], + [0, 5], + [0, 0], + [0, 0], + [0, 0], + ], + v: [ + [-2.5, -11], + [-2.5, -8], + [2.5, 0], + [-2.5, 8], + [-2.5, 11], + ], + c: false, + }, + ix: 2, + }, + nm: 'Path 1', + mn: 'ADBE Vector Shape - Group', + hd: false, + }, + { + ty: 'st', + c: { a: 0, k: [0, 0, 0, 1], ix: 3 }, + o: { a: 0, k: 100, ix: 4 }, + w: { a: 0, k: 2, ix: 5 }, + lc: 2, + lj: 2, + bm: 0, + nm: 'Stroke 1', + mn: 'ADBE Vector Graphic - Stroke', + hd: false, + }, + { + ty: 'tr', + p: { a: 0, k: [7.5, 16], 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 4', + np: 2, + cix: 2, + bm: 0, + ix: 4, + mn: 'ADBE Vector Group', + hd: false, + }, + { + ty: 'gr', + it: [ + { + ind: 0, + ty: 'sh', + ix: 1, + ks: { + a: 0, + k: { + i: [ + [0, 0], + [0, 0], + ], + o: [ + [0, 0], + [0, 0], + ], + v: [ + [3, 27.001], + [21, 27.001], + ], + c: false, + }, + ix: 2, + }, + nm: 'Path 1', + mn: 'ADBE Vector Shape - Group', + hd: false, + }, + { + ty: 'st', + c: { a: 0, k: [0, 0, 0, 1], ix: 3 }, + o: { a: 0, k: 100, ix: 4 }, + w: { a: 0, k: 2, ix: 5 }, + lc: 2, + lj: 2, + bm: 0, + nm: 'Stroke 1', + mn: 'ADBE Vector Graphic - Stroke', + hd: false, + }, + { + ty: 'tr', + p: { a: 0, k: [0, 0], 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 5', + np: 2, + cix: 2, + bm: 0, + ix: 5, + mn: 'ADBE Vector Group', + hd: false, + }, + { + ty: 'gr', + it: [ + { + ind: 0, + ty: 'sh', + ix: 1, + ks: { + a: 0, + k: { + i: [ + [0, 0], + [0, 0], + ], + o: [ + [0, 0], + [0, 0], + ], + v: [ + [3, 5], + [21, 5], + ], + c: false, + }, + ix: 2, + }, + nm: 'Path 1', + mn: 'ADBE Vector Shape - Group', + hd: false, + }, + { + ty: 'st', + c: { a: 0, k: [0, 0, 0, 1], ix: 3 }, + o: { a: 0, k: 100, ix: 4 }, + w: { a: 0, k: 2, ix: 5 }, + lc: 2, + lj: 2, + bm: 0, + nm: 'Stroke 1', + mn: 'ADBE Vector Graphic - Stroke', + hd: false, + }, + { + ty: 'tr', + p: { a: 0, k: [0, 0], 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 6', + np: 2, + cix: 2, + bm: 0, + ix: 6, + mn: 'ADBE Vector Group', + hd: false, + }, + ], + ip: 0, + op: 28, + st: 0, + bm: 0, + }, + { + ddd: 0, + ind: 3, + ty: 4, + nm: 'bottom shape', + parent: 2, + sr: 1, + ks: { + o: { a: 0, k: 100, ix: 11 }, + r: { a: 0, k: 0, ix: 10 }, + p: { a: 0, k: [12, 21.594, 0], ix: 2 }, + a: { a: 0, k: [4.167, 1.844, 0], ix: 1 }, + s: { a: 0, k: [100, 100, 100], ix: 6 }, + }, + ao: 0, + shapes: [ + { + ty: 'gr', + it: [ + { + ind: 0, + ty: 'sh', + ix: 1, + ks: { + a: 1, + k: [ + { + i: { x: 0.833, y: 0.833 }, + o: { x: 0.167, y: 0.167 }, + t: 3, + s: [ + { + i: [ + [0, 0], + [1.931, 0], + [0.376, -1.819], + ], + o: [ + [-0.376, -1.819], + [-1.931, 0], + [0, 0], + ], + v: [ + [3.917, 1.594], + [0, -1.594], + [-3.917, 1.594], + ], + c: true, + }, + ], + }, + { + i: { x: 0.833, y: 0.833 }, + o: { x: 0.167, y: 0.167 }, + t: 5, + s: [ + { + i: [ + [0, 0], + [1.931, 0], + [0.376, -1.819], + ], + o: [ + [-0.376, -1.819], + [-1.931, 0], + [0, 0], + ], + v: [ + [4.008, 2.243], + [0.091, -0.945], + [-3.826, 2.243], + ], + c: true, + }, + ], + }, + { + i: { x: 0.833, y: 0.833 }, + o: { x: 0.167, y: 0.167 }, + t: 9, + s: [ + { + i: [ + [0, 0], + [1.931, 0], + [0.376, -1.819], + ], + o: [ + [-0.376, -1.819], + [-1.931, 0], + [0, 0], + ], + v: [ + [3.972, 0.541], + [0.055, -2.647], + [-3.862, 0.541], + ], + c: true, + }, + ], + }, + { + i: { x: 0.833, y: 0.833 }, + o: { x: 0.167, y: 0.167 }, + t: 11, + s: [ + { + i: [ + [0, 0], + [1.471, 0], + [0.286, -1.386], + ], + o: [ + [-0.286, -1.386], + [-1.471, 0], + [0, 0], + ], + v: [ + [2.918, -0.656], + [-0.066, -3.085], + [-3.05, -0.656], + ], + c: true, + }, + ], + }, + { + i: { x: 0.833, y: 0.833 }, + o: { x: 0.167, y: 0.167 }, + t: 20, + s: [ + { + i: [ + [0, 0], + [1.471, 0], + [0.286, -1.386], + ], + o: [ + [-0.286, -1.386], + [-1.471, 0], + [0, 0], + ], + v: [ + [2.918, -0.656], + [-0.066, -3.085], + [-3.05, -0.656], + ], + c: true, + }, + ], + }, + { + t: 23, + s: [ + { + i: [ + [0, 0], + [0.832, 0], + [0.162, -0.784], + ], + o: [ + [-0.162, -0.784], + [-0.832, 0], + [0, 0], + ], + v: [ + [1.688, -1.991], + [0, -3.365], + [-1.688, -1.991], + ], + c: true, + }, + ], + }, + ], + ix: 2, + }, + nm: 'Path 1', + mn: 'ADBE Vector Shape - Group', + hd: false, + }, + { + ty: 'fl', + c: { a: 0, k: [0, 0, 0, 1], ix: 4 }, + o: { a: 0, k: 100, ix: 5 }, + r: 1, + bm: 0, + nm: 'Fill 1', + mn: 'ADBE Vector Graphic - Fill', + hd: false, + }, + { + ty: 'tr', + p: { a: 0, k: [4.167, 1.844], 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: 23, + st: 0, + bm: 0, + }, + { + ddd: 0, + ind: 4, + ty: 4, + nm: 'bottom shape2', + sr: 1, + ks: { + o: { a: 0, k: 100, ix: 11 }, + r: { a: 0, k: 0, ix: 10 }, + p: { a: 0, k: [15, 20.594, 0], ix: 2 }, + a: { a: 0, k: [4.167, 1.844, 0], ix: 1 }, + s: { a: 0, k: [100, 100, 100], ix: 6 }, + }, + ao: 0, + shapes: [ + { + ty: 'gr', + it: [ + { + ind: 0, + ty: 'sh', + ix: 1, + ks: { + a: 1, + k: [ + { + i: { x: 0.667, y: 1 }, + o: { x: 0.333, y: 0 }, + t: 22, + s: [ + { + i: [ + [0, 0], + [0.678, 0], + [0.132, -0.639], + ], + o: [ + [-0.132, -0.639], + [-0.678, 0], + [0, 0], + ], + v: [ + [1.375, 1.56], + [0, 0.44], + [-1.375, 1.56], + ], + c: true, + }, + ], + }, + { + t: 25, + s: [ + { + i: [ + [0, 0], + [1.931, 0], + [0.376, -1.819], + ], + o: [ + [-0.376, -1.819], + [-1.931, 0], + [0, 0], + ], + v: [ + [3.917, 1.594], + [0, -1.594], + [-3.917, 1.594], + ], + c: true, + }, + ], + }, + ], + ix: 2, + }, + nm: 'Path 1', + mn: 'ADBE Vector Shape - Group', + hd: false, + }, + { + ty: 'fl', + c: { a: 0, k: [0, 0, 0, 1], ix: 4 }, + o: { a: 0, k: 100, ix: 5 }, + r: 1, + bm: 0, + nm: 'Fill 1', + mn: 'ADBE Vector Graphic - Fill', + hd: false, + }, + { + ty: 'tr', + p: { a: 0, k: [4.167, 1.844], 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: 22, + op: 28, + st: 0, + bm: 0, + }, + ], + markers: [], +} + +export const hourglassAnimationWhite = { + nm: 'hourglass', + h: 30, + w: 30, + meta: { g: '@lottiefiles/toolkit-js 0.33.2' }, + layers: [ + { + ty: 4, + nm: 'middle Outlines', + sr: 1, + st: 0, + op: 28, + ip: 0, + hasMask: false, + ao: 0, + ks: { + a: { a: 0, k: [1, 5.5, 0] }, + s: { a: 0, k: [100, 100, 100] }, + sk: { a: 0, k: 0 }, + p: { a: 0, k: [15, 15.5, 0] }, + r: { a: 0, k: 0 }, + sa: { a: 0, k: 0 }, + o: { a: 0, k: 100 }, + }, + ef: [], + shapes: [ + { + ty: 'gr', + nm: 'Group 1', + it: [ + { + ty: 'sh', + nm: 'Path 1', + d: 1, + ks: { + a: 0, + k: { + c: false, + i: [ + [0, 0], + [0, 0], + ], + o: [ + [0, 0], + [0, 0], + ], + v: [ + [1, 2.188], + [1, 11], + ], + }, + }, + }, + { + ty: 'st', + nm: 'Stroke 1', + lc: 2, + lj: 2, + ml: 1, + o: { a: 0, k: 100 }, + w: { a: 0, k: 2 }, + c: { a: 0, k: [1, 1, 1] }, + }, + { + ty: 'tr', + a: { a: 0, k: [0, 0] }, + s: { a: 0, k: [100, 100] }, + sk: { a: 0, k: 0 }, + p: { a: 0, k: [0, 0] }, + r: { a: 0, k: 0 }, + sa: { a: 0, k: 0 }, + o: { a: 0, k: 100 }, + }, + ], + }, + { + ty: 'tm', + nm: 'Trim Paths 1', + e: { + a: 1, + k: [ + { o: { x: 0.333, y: 0 }, i: { x: 0.667, y: 1 }, s: [0], t: 18 }, + { s: [100], t: 22 }, + ], + }, + o: { a: 0, k: 0 }, + s: { + a: 1, + k: [ + { o: { x: 0.333, y: 0 }, i: { x: 0.667, y: 1 }, s: [0], t: 18 }, + { o: { x: 0.333, y: 0 }, i: { x: 0.667, y: 1 }, s: [0], t: 22 }, + { s: [100], t: 25 }, + ], + }, + m: 1, + }, + ], + ind: 1, + }, + { + ty: 4, + nm: 'hourglass Outlines', + sr: 1, + st: 0, + op: 28, + ip: 0, + hasMask: false, + ao: 0, + ks: { + a: { a: 0, k: [12, 16, 0] }, + s: { + a: 1, + k: [ + { o: { x: 0.333, y: 0 }, i: { x: 0.667, y: 1 }, s: [100, 100, 100], t: 3 }, + { o: { x: 0.333, y: 0 }, i: { x: 0.667, y: 1 }, s: [90, 90, 100], t: 5 }, + { o: { x: 0.333, y: 0 }, i: { x: 0.667, y: 1 }, s: [90, 90, 100], t: 9 }, + { o: { x: 0.333, y: 0 }, i: { x: 0.667, y: 1 }, s: [100, 100, 100], t: 11 }, + { s: [100, 100, 100], t: 18 }, + ], + }, + sk: { a: 0, k: 0 }, + p: { a: 0, k: [15, 15, 0] }, + r: { + a: 1, + k: [ + { o: { x: 0.333, y: 0 }, i: { x: 0.667, y: 1 }, s: [0], t: 3 }, + { o: { x: 0.333, y: 0 }, i: { x: 0.667, y: 1 }, s: [40], t: 5 }, + { o: { x: 0.333, y: 0 }, i: { x: 0.667, y: 1 }, s: [193], t: 9 }, + { o: { x: 0.333, y: 0 }, i: { x: 0.667, y: 1 }, s: [180], t: 11 }, + { s: [180], t: 18 }, + ], + }, + sa: { a: 0, k: 0 }, + o: { a: 0, k: 100 }, + }, + ef: [], + shapes: [ + { + ty: 'gr', + nm: 'Group 1', + it: [ + { + ty: 'sh', + nm: 'Path 1', + d: 1, + ks: { + a: 0, + k: { + c: true, + i: [ + [0, 0], + [0, 0], + [0, 0], + [0, 0], + ], + o: [ + [0, 0], + [0, 0], + [0, 0], + [0, 0], + ], + v: [ + [-7, -2], + [7, -2], + [7, 2], + [-7, 2], + ], + }, + }, + }, + { ty: 'fl', nm: 'Fill 1', c: { a: 0, k: [1, 1, 1] }, r: 1, o: { a: 0, k: 100 } }, + { + ty: 'tr', + a: { a: 0, k: [0, 0] }, + s: { a: 0, k: [100, 100] }, + sk: { a: 0, k: 0 }, + p: { a: 0, k: [12, 25] }, + r: { a: 0, k: 0 }, + sa: { a: 0, k: 0 }, + o: { a: 0, k: 100 }, + }, + ], + }, + { + ty: 'gr', + nm: 'Group 2', + it: [ + { + ty: 'sh', + nm: 'Path 1', + d: 1, + ks: { + a: 0, + k: { + c: true, + i: [ + [0, 0], + [0, 0], + [0, 0], + [0, 0], + ], + o: [ + [0, 0], + [0, 0], + [0, 0], + [0, 0], + ], + v: [ + [-7, -2], + [7, -2], + [7, 2], + [-7, 2], + ], + }, + }, + }, + { ty: 'fl', nm: 'Fill 1', c: { a: 0, k: [1, 1, 1] }, r: 1, o: { a: 0, k: 100 } }, + { + ty: 'tr', + a: { a: 0, k: [0, 0] }, + s: { a: 0, k: [100, 100] }, + sk: { a: 0, k: 0 }, + p: { a: 0, k: [12, 7] }, + r: { a: 0, k: 0 }, + sa: { a: 0, k: 0 }, + o: { a: 0, k: 100 }, + }, + ], + }, + { + ty: 'gr', + nm: 'Group 3', + it: [ + { + ty: 'sh', + nm: 'Path 1', + d: 1, + ks: { + a: 0, + k: { + c: false, + i: [ + [0, 0], + [0, 0], + [0, 0], + [0, 5], + [0, 0], + ], + o: [ + [0, 0], + [0, -5], + [0, 0], + [0, 0], + [0, 0], + ], + v: [ + [2.5, 11], + [2.5, 8], + [-2.5, 0], + [2.5, -8], + [2.5, -11], + ], + }, + }, + }, + { + ty: 'st', + nm: 'Stroke 1', + lc: 2, + lj: 2, + ml: 1, + o: { a: 0, k: 100 }, + w: { a: 0, k: 2 }, + c: { a: 0, k: [1, 1, 1] }, + }, + { + ty: 'tr', + a: { a: 0, k: [0, 0] }, + s: { a: 0, k: [100, 100] }, + sk: { a: 0, k: 0 }, + p: { a: 0, k: [16.5, 16.001] }, + r: { a: 0, k: 0 }, + sa: { a: 0, k: 0 }, + o: { a: 0, k: 100 }, + }, + ], + }, + { + ty: 'gr', + nm: 'Group 4', + it: [ + { + ty: 'sh', + nm: 'Path 1', + d: 1, + ks: { + a: 0, + k: { + c: false, + i: [ + [0, 0], + [0, 0], + [0, 0], + [0, -5], + [0, 0], + ], + o: [ + [0, 0], + [0, 5], + [0, 0], + [0, 0], + [0, 0], + ], + v: [ + [-2.5, -11], + [-2.5, -8], + [2.5, 0], + [-2.5, 8], + [-2.5, 11], + ], + }, + }, + }, + { + ty: 'st', + nm: 'Stroke 1', + lc: 2, + lj: 2, + ml: 1, + o: { a: 0, k: 100 }, + w: { a: 0, k: 2 }, + c: { a: 0, k: [1, 1, 1] }, + }, + { + ty: 'tr', + a: { a: 0, k: [0, 0] }, + s: { a: 0, k: [100, 100] }, + sk: { a: 0, k: 0 }, + p: { a: 0, k: [7.5, 16] }, + r: { a: 0, k: 0 }, + sa: { a: 0, k: 0 }, + o: { a: 0, k: 100 }, + }, + ], + }, + { + ty: 'gr', + nm: 'Group 5', + it: [ + { + ty: 'sh', + nm: 'Path 1', + d: 1, + ks: { + a: 0, + k: { + c: false, + i: [ + [0, 0], + [0, 0], + ], + o: [ + [0, 0], + [0, 0], + ], + v: [ + [3, 27.001], + [21, 27.001], + ], + }, + }, + }, + { + ty: 'st', + nm: 'Stroke 1', + lc: 2, + lj: 2, + ml: 1, + o: { a: 0, k: 100 }, + w: { a: 0, k: 2 }, + c: { a: 0, k: [1, 1, 1] }, + }, + { + ty: 'tr', + a: { a: 0, k: [0, 0] }, + s: { a: 0, k: [100, 100] }, + sk: { a: 0, k: 0 }, + p: { a: 0, k: [0, 0] }, + r: { a: 0, k: 0 }, + sa: { a: 0, k: 0 }, + o: { a: 0, k: 100 }, + }, + ], + }, + { + ty: 'gr', + nm: 'Group 6', + it: [ + { + ty: 'sh', + nm: 'Path 1', + d: 1, + ks: { + a: 0, + k: { + c: false, + i: [ + [0, 0], + [0, 0], + ], + o: [ + [0, 0], + [0, 0], + ], + v: [ + [3, 5], + [21, 5], + ], + }, + }, + }, + { + ty: 'st', + nm: 'Stroke 1', + lc: 2, + lj: 2, + ml: 1, + o: { a: 0, k: 100 }, + w: { a: 0, k: 2 }, + c: { a: 0, k: [1, 1, 1] }, + }, + { + ty: 'tr', + a: { a: 0, k: [0, 0] }, + s: { a: 0, k: [100, 100] }, + sk: { a: 0, k: 0 }, + p: { a: 0, k: [0, 0] }, + r: { a: 0, k: 0 }, + sa: { a: 0, k: 0 }, + o: { a: 0, k: 100 }, + }, + ], + }, + ], + ind: 2, + }, + { + ty: 4, + nm: 'bottom shape', + sr: 1, + st: 0, + op: 23, + ip: 0, + hasMask: false, + ao: 0, + ks: { + a: { a: 0, k: [4.167, 1.844, 0] }, + s: { a: 0, k: [100, 100, 100] }, + sk: { a: 0, k: 0 }, + p: { a: 0, k: [12, 21.594, 0] }, + r: { a: 0, k: 0 }, + sa: { a: 0, k: 0 }, + o: { a: 0, k: 100 }, + }, + ef: [], + shapes: [ + { + ty: 'gr', + nm: 'Group 1', + it: [ + { + ty: 'sh', + nm: 'Path 1', + d: 1, + ks: { + a: 1, + k: [ + { + o: { x: 0.167, y: 0.167 }, + i: { x: 0.833, y: 0.833 }, + s: [ + { + c: true, + i: [ + [0, 0], + [1.931, 0], + [0.376, -1.819], + ], + o: [ + [-0.376, -1.819], + [-1.931, 0], + [0, 0], + ], + v: [ + [3.917, 1.594], + [0, -1.594], + [-3.917, 1.594], + ], + }, + ], + t: 3, + }, + { + o: { x: 0.167, y: 0.167 }, + i: { x: 0.833, y: 0.833 }, + s: [ + { + c: true, + i: [ + [0, 0], + [1.931, 0], + [0.376, -1.819], + ], + o: [ + [-0.376, -1.819], + [-1.931, 0], + [0, 0], + ], + v: [ + [4.008, 2.243], + [0.091, -0.945], + [-3.826, 2.243], + ], + }, + ], + t: 5, + }, + { + o: { x: 0.167, y: 0.167 }, + i: { x: 0.833, y: 0.833 }, + s: [ + { + c: true, + i: [ + [0, 0], + [1.931, 0], + [0.376, -1.819], + ], + o: [ + [-0.376, -1.819], + [-1.931, 0], + [0, 0], + ], + v: [ + [3.972, 0.541], + [0.055, -2.647], + [-3.862, 0.541], + ], + }, + ], + t: 9, + }, + { + o: { x: 0.167, y: 0.167 }, + i: { x: 0.833, y: 0.833 }, + s: [ + { + c: true, + i: [ + [0, 0], + [1.471, 0], + [0.286, -1.386], + ], + o: [ + [-0.286, -1.386], + [-1.471, 0], + [0, 0], + ], + v: [ + [2.918, -0.656], + [-0.066, -3.085], + [-3.05, -0.656], + ], + }, + ], + t: 11, + }, + { + o: { x: 0.167, y: 0.167 }, + i: { x: 0.833, y: 0.833 }, + s: [ + { + c: true, + i: [ + [0, 0], + [1.471, 0], + [0.286, -1.386], + ], + o: [ + [-0.286, -1.386], + [-1.471, 0], + [0, 0], + ], + v: [ + [2.918, -0.656], + [-0.066, -3.085], + [-3.05, -0.656], + ], + }, + ], + t: 20, + }, + { + s: [ + { + c: true, + i: [ + [0, 0], + [0.832, 0], + [0.162, -0.784], + ], + o: [ + [-0.162, -0.784], + [-0.832, 0], + [0, 0], + ], + v: [ + [1.688, -1.991], + [0, -3.365], + [-1.688, -1.991], + ], + }, + ], + t: 23, + }, + ], + }, + }, + { ty: 'fl', nm: 'Fill 1', c: { a: 0, k: [1, 1, 1] }, r: 1, o: { a: 0, k: 100 } }, + { + ty: 'tr', + a: { a: 0, k: [0, 0] }, + s: { a: 0, k: [100, 100] }, + sk: { a: 0, k: 0 }, + p: { a: 0, k: [4.167, 1.844] }, + r: { a: 0, k: 0 }, + sa: { a: 0, k: 0 }, + o: { a: 0, k: 100 }, + }, + ], + }, + ], + ind: 3, + parent: 2, + }, + { + ty: 4, + nm: 'bottom shape2', + sr: 1, + st: 0, + op: 28, + ip: 22, + hasMask: false, + ao: 0, + ks: { + a: { a: 0, k: [4.167, 1.844, 0] }, + s: { a: 0, k: [100, 100, 100] }, + sk: { a: 0, k: 0 }, + p: { a: 0, k: [15, 20.594, 0] }, + r: { a: 0, k: 0 }, + sa: { a: 0, k: 0 }, + o: { a: 0, k: 100 }, + }, + ef: [], + shapes: [ + { + ty: 'gr', + nm: 'Group 1', + it: [ + { + ty: 'sh', + nm: 'Path 1', + d: 1, + ks: { + a: 1, + k: [ + { + o: { x: 0.333, y: 0 }, + i: { x: 0.667, y: 1 }, + s: [ + { + c: true, + i: [ + [0, 0], + [0.678, 0], + [0.132, -0.639], + ], + o: [ + [-0.132, -0.639], + [-0.678, 0], + [0, 0], + ], + v: [ + [1.375, 1.56], + [0, 0.44], + [-1.375, 1.56], + ], + }, + ], + t: 22, + }, + { + s: [ + { + c: true, + i: [ + [0, 0], + [1.931, 0], + [0.376, -1.819], + ], + o: [ + [-0.376, -1.819], + [-1.931, 0], + [0, 0], + ], + v: [ + [3.917, 1.594], + [0, -1.594], + [-3.917, 1.594], + ], + }, + ], + t: 25, + }, + ], + }, + }, + { ty: 'fl', nm: 'Fill 1', c: { a: 0, k: [1, 1, 1] }, r: 1, o: { a: 0, k: 100 } }, + { + ty: 'tr', + a: { a: 0, k: [0, 0] }, + s: { a: 0, k: [100, 100] }, + sk: { a: 0, k: 0 }, + p: { a: 0, k: [4.167, 1.844] }, + r: { a: 0, k: 0 }, + sa: { a: 0, k: 0 }, + o: { a: 0, k: 100 }, + }, + ], + }, + ], + ind: 4, + }, + ], + v: '5.6.5', + fr: 24, + op: 28, + ip: 0, + assets: [], +} diff --git a/src/components/Inbox/index.tsx b/src/components/Inbox/index.tsx index 1be95c8d9..64937bc3e 100644 --- a/src/components/Inbox/index.tsx +++ b/src/components/Inbox/index.tsx @@ -18,6 +18,7 @@ import { useUser } from 'hooks/useUser' import { navigate } from 'gatsby' import Lottie from 'lottie-react' import hourglassAnimation from 'images/icons8-hourglass.json' +import hourglassAnimationWhite from 'images/icons8-hourglass-white.json' import { useInView } from 'react-intersection-observer' import useTopicsNav from '../../navs/useTopicsNav' import { useWindow } from '../../context/Window' @@ -441,7 +442,12 @@ export default function Inbox(props) {
+
diff --git a/src/images/icons8-hourglass-white.json b/src/images/icons8-hourglass-white.json new file mode 100644 index 000000000..1c9108f39 --- /dev/null +++ b/src/images/icons8-hourglass-white.json @@ -0,0 +1,774 @@ +{ + "nm": "hourglass", + "h": 30, + "w": 30, + "meta": { "g": "@lottiefiles/toolkit-js 0.33.2" }, + "layers": [ + { + "ty": 4, + "nm": "middle Outlines", + "sr": 1, + "st": 0, + "op": 28, + "ip": 0, + "hasMask": false, + "ao": 0, + "ks": { + "a": { "a": 0, "k": [1, 5.5, 0] }, + "s": { "a": 0, "k": [100, 100, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [15, 15.5, 0] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + }, + "ef": [], + "shapes": [ + { + "ty": "gr", + "nm": "Group 1", + "it": [ + { + "ty": "sh", + "nm": "Path 1", + "d": 1, + "ks": { + "a": 0, + "k": { + "c": false, + "i": [ + [0, 0], + [0, 0] + ], + "o": [ + [0, 0], + [0, 0] + ], + "v": [ + [1, 2.188], + [1, 11] + ] + } + } + }, + { + "ty": "st", + "nm": "Stroke 1", + "lc": 2, + "lj": 2, + "ml": 1, + "o": { "a": 0, "k": 100 }, + "w": { "a": 0, "k": 2 }, + "c": { "a": 0, "k": [1, 1, 1] } + }, + { + "ty": "tr", + "a": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [100, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [0, 0] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + } + ] + }, + { + "ty": "tm", + "nm": "Trim Paths 1", + "e": { + "a": 1, + "k": [ + { "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.667, "y": 1 }, "s": [0], "t": 18 }, + { "s": [100], "t": 22 } + ] + }, + "o": { "a": 0, "k": 0 }, + "s": { + "a": 1, + "k": [ + { "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.667, "y": 1 }, "s": [0], "t": 18 }, + { "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.667, "y": 1 }, "s": [0], "t": 22 }, + { "s": [100], "t": 25 } + ] + }, + "m": 1 + } + ], + "ind": 1 + }, + { + "ty": 4, + "nm": "hourglass Outlines", + "sr": 1, + "st": 0, + "op": 28, + "ip": 0, + "hasMask": false, + "ao": 0, + "ks": { + "a": { "a": 0, "k": [12, 16, 0] }, + "s": { + "a": 1, + "k": [ + { "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.667, "y": 1 }, "s": [100, 100, 100], "t": 3 }, + { "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.667, "y": 1 }, "s": [90, 90, 100], "t": 5 }, + { "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.667, "y": 1 }, "s": [90, 90, 100], "t": 9 }, + { "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.667, "y": 1 }, "s": [100, 100, 100], "t": 11 }, + { "s": [100, 100, 100], "t": 18 } + ] + }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [15, 15, 0] }, + "r": { + "a": 1, + "k": [ + { "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.667, "y": 1 }, "s": [0], "t": 3 }, + { "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.667, "y": 1 }, "s": [40], "t": 5 }, + { "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.667, "y": 1 }, "s": [193], "t": 9 }, + { "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.667, "y": 1 }, "s": [180], "t": 11 }, + { "s": [180], "t": 18 } + ] + }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + }, + "ef": [], + "shapes": [ + { + "ty": "gr", + "nm": "Group 1", + "it": [ + { + "ty": "sh", + "nm": "Path 1", + "d": 1, + "ks": { + "a": 0, + "k": { + "c": true, + "i": [ + [0, 0], + [0, 0], + [0, 0], + [0, 0] + ], + "o": [ + [0, 0], + [0, 0], + [0, 0], + [0, 0] + ], + "v": [ + [-7, -2], + [7, -2], + [7, 2], + [-7, 2] + ] + } + } + }, + { + "ty": "fl", + "nm": "Fill 1", + "c": { "a": 0, "k": [1, 1, 1] }, + "r": 1, + "o": { "a": 0, "k": 100 } + }, + { + "ty": "tr", + "a": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [100, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [12, 25] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + } + ] + }, + { + "ty": "gr", + "nm": "Group 2", + "it": [ + { + "ty": "sh", + "nm": "Path 1", + "d": 1, + "ks": { + "a": 0, + "k": { + "c": true, + "i": [ + [0, 0], + [0, 0], + [0, 0], + [0, 0] + ], + "o": [ + [0, 0], + [0, 0], + [0, 0], + [0, 0] + ], + "v": [ + [-7, -2], + [7, -2], + [7, 2], + [-7, 2] + ] + } + } + }, + { + "ty": "fl", + "nm": "Fill 1", + "c": { "a": 0, "k": [1, 1, 1] }, + "r": 1, + "o": { "a": 0, "k": 100 } + }, + { + "ty": "tr", + "a": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [100, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [12, 7] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + } + ] + }, + { + "ty": "gr", + "nm": "Group 3", + "it": [ + { + "ty": "sh", + "nm": "Path 1", + "d": 1, + "ks": { + "a": 0, + "k": { + "c": false, + "i": [ + [0, 0], + [0, 0], + [0, 0], + [0, 5], + [0, 0] + ], + "o": [ + [0, 0], + [0, -5], + [0, 0], + [0, 0], + [0, 0] + ], + "v": [ + [2.5, 11], + [2.5, 8], + [-2.5, 0], + [2.5, -8], + [2.5, -11] + ] + } + } + }, + { + "ty": "st", + "nm": "Stroke 1", + "lc": 2, + "lj": 2, + "ml": 1, + "o": { "a": 0, "k": 100 }, + "w": { "a": 0, "k": 2 }, + "c": { "a": 0, "k": [1, 1, 1] } + }, + { + "ty": "tr", + "a": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [100, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [16.5, 16.001] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + } + ] + }, + { + "ty": "gr", + "nm": "Group 4", + "it": [ + { + "ty": "sh", + "nm": "Path 1", + "d": 1, + "ks": { + "a": 0, + "k": { + "c": false, + "i": [ + [0, 0], + [0, 0], + [0, 0], + [0, -5], + [0, 0] + ], + "o": [ + [0, 0], + [0, 5], + [0, 0], + [0, 0], + [0, 0] + ], + "v": [ + [-2.5, -11], + [-2.5, -8], + [2.5, 0], + [-2.5, 8], + [-2.5, 11] + ] + } + } + }, + { + "ty": "st", + "nm": "Stroke 1", + "lc": 2, + "lj": 2, + "ml": 1, + "o": { "a": 0, "k": 100 }, + "w": { "a": 0, "k": 2 }, + "c": { "a": 0, "k": [1, 1, 1] } + }, + { + "ty": "tr", + "a": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [100, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [7.5, 16] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + } + ] + }, + { + "ty": "gr", + "nm": "Group 5", + "it": [ + { + "ty": "sh", + "nm": "Path 1", + "d": 1, + "ks": { + "a": 0, + "k": { + "c": false, + "i": [ + [0, 0], + [0, 0] + ], + "o": [ + [0, 0], + [0, 0] + ], + "v": [ + [3, 27.001], + [21, 27.001] + ] + } + } + }, + { + "ty": "st", + "nm": "Stroke 1", + "lc": 2, + "lj": 2, + "ml": 1, + "o": { "a": 0, "k": 100 }, + "w": { "a": 0, "k": 2 }, + "c": { "a": 0, "k": [1, 1, 1] } + }, + { + "ty": "tr", + "a": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [100, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [0, 0] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + } + ] + }, + { + "ty": "gr", + "nm": "Group 6", + "it": [ + { + "ty": "sh", + "nm": "Path 1", + "d": 1, + "ks": { + "a": 0, + "k": { + "c": false, + "i": [ + [0, 0], + [0, 0] + ], + "o": [ + [0, 0], + [0, 0] + ], + "v": [ + [3, 5], + [21, 5] + ] + } + } + }, + { + "ty": "st", + "nm": "Stroke 1", + "lc": 2, + "lj": 2, + "ml": 1, + "o": { "a": 0, "k": 100 }, + "w": { "a": 0, "k": 2 }, + "c": { "a": 0, "k": [1, 1, 1] } + }, + { + "ty": "tr", + "a": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [100, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [0, 0] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + } + ] + } + ], + "ind": 2 + }, + { + "ty": 4, + "nm": "bottom shape", + "sr": 1, + "st": 0, + "op": 23, + "ip": 0, + "hasMask": false, + "ao": 0, + "ks": { + "a": { "a": 0, "k": [4.167, 1.844, 0] }, + "s": { "a": 0, "k": [100, 100, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [12, 21.594, 0] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + }, + "ef": [], + "shapes": [ + { + "ty": "gr", + "nm": "Group 1", + "it": [ + { + "ty": "sh", + "nm": "Path 1", + "d": 1, + "ks": { + "a": 1, + "k": [ + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [ + { + "c": true, + "i": [ + [0, 0], + [1.931, 0], + [0.376, -1.819] + ], + "o": [ + [-0.376, -1.819], + [-1.931, 0], + [0, 0] + ], + "v": [ + [3.917, 1.594], + [0, -1.594], + [-3.917, 1.594] + ] + } + ], + "t": 3 + }, + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [ + { + "c": true, + "i": [ + [0, 0], + [1.931, 0], + [0.376, -1.819] + ], + "o": [ + [-0.376, -1.819], + [-1.931, 0], + [0, 0] + ], + "v": [ + [4.008, 2.243], + [0.091, -0.945], + [-3.826, 2.243] + ] + } + ], + "t": 5 + }, + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [ + { + "c": true, + "i": [ + [0, 0], + [1.931, 0], + [0.376, -1.819] + ], + "o": [ + [-0.376, -1.819], + [-1.931, 0], + [0, 0] + ], + "v": [ + [3.972, 0.541], + [0.055, -2.647], + [-3.862, 0.541] + ] + } + ], + "t": 9 + }, + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [ + { + "c": true, + "i": [ + [0, 0], + [1.471, 0], + [0.286, -1.386] + ], + "o": [ + [-0.286, -1.386], + [-1.471, 0], + [0, 0] + ], + "v": [ + [2.918, -0.656], + [-0.066, -3.085], + [-3.05, -0.656] + ] + } + ], + "t": 11 + }, + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [ + { + "c": true, + "i": [ + [0, 0], + [1.471, 0], + [0.286, -1.386] + ], + "o": [ + [-0.286, -1.386], + [-1.471, 0], + [0, 0] + ], + "v": [ + [2.918, -0.656], + [-0.066, -3.085], + [-3.05, -0.656] + ] + } + ], + "t": 20 + }, + { + "s": [ + { + "c": true, + "i": [ + [0, 0], + [0.832, 0], + [0.162, -0.784] + ], + "o": [ + [-0.162, -0.784], + [-0.832, 0], + [0, 0] + ], + "v": [ + [1.688, -1.991], + [0, -3.365], + [-1.688, -1.991] + ] + } + ], + "t": 23 + } + ] + } + }, + { + "ty": "fl", + "nm": "Fill 1", + "c": { "a": 0, "k": [1, 1, 1] }, + "r": 1, + "o": { "a": 0, "k": 100 } + }, + { + "ty": "tr", + "a": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [100, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [4.167, 1.844] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + } + ] + } + ], + "ind": 3, + "parent": 2 + }, + { + "ty": 4, + "nm": "bottom shape2", + "sr": 1, + "st": 0, + "op": 28, + "ip": 22, + "hasMask": false, + "ao": 0, + "ks": { + "a": { "a": 0, "k": [4.167, 1.844, 0] }, + "s": { "a": 0, "k": [100, 100, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [15, 20.594, 0] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + }, + "ef": [], + "shapes": [ + { + "ty": "gr", + "nm": "Group 1", + "it": [ + { + "ty": "sh", + "nm": "Path 1", + "d": 1, + "ks": { + "a": 1, + "k": [ + { + "o": { "x": 0.333, "y": 0 }, + "i": { "x": 0.667, "y": 1 }, + "s": [ + { + "c": true, + "i": [ + [0, 0], + [0.678, 0], + [0.132, -0.639] + ], + "o": [ + [-0.132, -0.639], + [-0.678, 0], + [0, 0] + ], + "v": [ + [1.375, 1.56], + [0, 0.44], + [-1.375, 1.56] + ] + } + ], + "t": 22 + }, + { + "s": [ + { + "c": true, + "i": [ + [0, 0], + [1.931, 0], + [0.376, -1.819] + ], + "o": [ + [-0.376, -1.819], + [-1.931, 0], + [0, 0] + ], + "v": [ + [3.917, 1.594], + [0, -1.594], + [-3.917, 1.594] + ] + } + ], + "t": 25 + } + ] + } + }, + { + "ty": "fl", + "nm": "Fill 1", + "c": { "a": 0, "k": [1, 1, 1] }, + "r": 1, + "o": { "a": 0, "k": 100 } + }, + { + "ty": "tr", + "a": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [100, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [4.167, 1.844] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + } + ] + } + ], + "ind": 4 + } + ], + "v": "5.6.5", + "fr": 24, + "op": 28, + "ip": 0, + "assets": [] +} diff --git a/static/lotties/hourglass-white.lottie b/static/lotties/hourglass-white.lottie new file mode 100644 index 000000000..574246198 Binary files /dev/null and b/static/lotties/hourglass-white.lottie differ diff --git a/static/scripts/initial-loader.js b/static/scripts/initial-loader.js new file mode 100644 index 000000000..491137f1c --- /dev/null +++ b/static/scripts/initial-loader.js @@ -0,0 +1,88 @@ +(function () { + try { + const body = document.body; + const loadingWrapper = document.createElement('div'); + const loadingStyles = document.createElement('style'); + loadingStyles.textContent = ` + #initial-loader { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + display: flex; + align-items: center; + justify-content: center; + z-index: 9999; + pointer-events: none; + } + #initial-loader-content { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + width: 20rem; + background: rgba(255, 255, 255, 0.75); + backdrop-filter: blur(8px); + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 0.25rem; + padding: 1rem; + } + body.dark #initial-loader-content { + background: rgba(30, 31, 35, 0.75); + border-color: rgba(255, 255, 255, 0.1); + } + .hourglass-spinner { + animation: hourglass-flip 2.4s ease-in-out infinite; + opacity: 0.75; + } + @keyframes hourglass-flip { + 0%, 40% { transform: rotate(0deg); } + 48%, 90% { transform: rotate(180deg); } + 98%, 100% { transform: rotate(360deg); } + } + .sand-top { + transform-origin: center bottom; + animation: sand-drain-top 2.4s ease-in-out infinite; + } + .sand-bottom { + transform-origin: center top; + animation: sand-drain-bottom 2.4s ease-in-out infinite; + } + @keyframes sand-drain-top { + 0% { transform: scaleY(1); opacity: 0.6; } + 40% { transform: scaleY(0); opacity: 0; } + 48%, 100% { transform: scaleY(0); opacity: 0; } + } + @keyframes sand-drain-bottom { + 0%, 48% { transform: scaleY(0); opacity: 0; } + 50% { transform: scaleY(1); opacity: 0.6; } + 90% { transform: scaleY(0); opacity: 0; } + 100% { transform: scaleY(0); opacity: 0; } + } + #initial-loader-text { + flex: 1; + font-weight: 500; + color: rgba(0, 0, 0, 0.8); + } + body.dark #initial-loader-text { + color: rgba(255, 255, 255, 0.8); + } + `; + loadingWrapper.id = 'initial-loader'; + loadingWrapper.innerHTML = ` +
+ +
Loading PostHog...
+
+ `; + body.appendChild(loadingStyles); + body.appendChild(loadingWrapper); + } catch (error) { + console.error('Failed to initialize loading spinner:', error); + } +})(); \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 57eec7b4b..cdbd94aa9 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -362,6 +362,26 @@ module.exports = { '0%, 100%': { 'background-position': '0% 50%' }, '50%': { 'background-position': '100% 50%' }, }, + slideUpFadeIn: { + from: { + opacity: '0', + transform: 'translateY(10px)', + }, + to: { + opacity: '1', + transform: 'translateY(0)', + }, + }, + slideUpFadeOut: { + from: { + opacity: '1', + transform: 'translateY(0)', + }, + to: { + opacity: '0', + transform: 'translateY(-10px)', + }, + }, }, animation: { wiggle: 'wiggle .2s ease-in-out 3', @@ -381,6 +401,8 @@ module.exports = { 'spin-slow': 'spin-slow 4s linear infinite', 'spin-slow-reverse': 'spin-slow-reverse 4s linear infinite', 'gradient-rotate': 'gradient-rotate 3s ease-in-out infinite', + 'slide-up-fade-in': 'slideUpFadeIn 300ms ease-out forwards', + 'slide-up-fade-out': 'slideUpFadeOut 300ms ease-in forwards', }, containers: { '2xs': '16rem',