[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Fusing-css-to-create-a-skeleton-screen":663,"blog-author-\u002Fblog\u002Fusing-css-to-create-a-skeleton-screen":1049,"i-material-symbols:arrow-back-rounded":1064},{"id":4,"extension":5,"footer":6,"header":73,"meta":83,"stem":84,"__hash__":85},"navigation\u002Fdata\u002Fshared\u002Fnavigation.yml","yml",{"brand":7,"columns":13,"legal":63},{"name":8,"tagline":9,"downloadCta":10},"Pieces","The memory layer for modern work.",{"label":11,"href":12},"All downloads","\u002Fdownloads",[14,26,39,51],{"title":15,"links":16},"Product",[17,20,23],{"label":18,"href":19},"Pieces Desktop","\u002F",{"label":21,"href":22},"Pieces Enterprise","\u002Fenterprise",{"label":24,"href":25},"Pieces MCP","\u002Fmcp",{"title":27,"links":28},"Resources",[29,33,36],{"label":30,"href":31,"external":32},"Documentation","url:docs.home",true,{"label":34,"href":35},"Blog","\u002Fblog",{"label":37,"href":38,"external":32},"GitHub","url:github.org",{"title":40,"links":41},"Community",[42,45,48],{"label":43,"href":44,"external":32},"Discord","url:social.discord",{"label":46,"href":47,"external":32},"X \u002F Twitter","url:social.x",{"label":49,"href":50,"external":32},"LinkedIn","url:social.linkedin",{"title":52,"links":53},"Company",[54,57,60],{"label":55,"href":56},"About","\u002Fabout",{"label":58,"href":59},"Updates","\u002Fupdates",{"label":61,"href":62},"Contact","\u002Fcontact",[64,67,70],{"label":65,"href":66},"Privacy Policy","\u002Flegal\u002Fprivacy",{"label":68,"href":69},"Refund Policy","\u002Flegal\u002Frefund",{"label":71,"href":72},"Terms of Service","\u002Flegal\u002Fterms",{"links":74,"signIn":75,"contact":78,"cta":80},[],{"label":76,"href":77},"Sign in","url:portal.home",{"label":79,"href":62},"Get in touch",{"label":81,"href":82},"Download","url:routes.downloads",{},"data\u002Fshared\u002Fnavigation","VdirGIa8cUm6xLprbBeTKcw914JfyJjWfF-9hSVOX5Y",{"id":87,"extension":5,"links":88,"meta":660,"stem":661,"__hash__":662},"urlSettings\u002Fdata\u002Fshared\u002Furls.yml",[89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,295,299,303,306,310,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,453,457,461,465,469,473,477,480,483,486,489,493,497,500,504,508,512,516,520,524,528,532,536,540,544,548,551,555,559,563,567,571,574,577,580,584,587,591,595,599,603,606,610,614,617,620,623,627,631,635,638,641,644,648,652,656],{"key":90,"label":91,"href":92},"downloads.desktop","Desktop download page","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdownload",{"key":94,"label":95,"href":96},"downloads.macOS.dmgArm64","macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg-arm64\u002Fdownload",{"key":98,"label":99,"href":100},"downloads.macOS.dmgIntel","macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg\u002Fdownload",{"key":102,"label":103,"href":104},"downloads.macOS.pkg","macOS PKG","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg\u002Fdownload",{"key":106,"label":107,"href":108},"downloads.macOS.universal","Desktop macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fmacos-universal\u002Fdownload",{"key":110,"label":111,"href":112},"downloads.macOS.pkgArm64","Desktop macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd-arm64\u002Fdownload",{"key":114,"label":115,"href":116},"downloads.macOS.pkgIntel","Desktop macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd\u002Fdownload",{"key":118,"label":119,"href":120},"downloads.windows.appinstaller","Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fpieces_for_x.appinstaller",{"key":122,"label":123,"href":124},"downloads.windows.exe","Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-exe\u002Fdownload",{"key":126,"label":127,"href":128},"downloads.windows.msix","Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-msix\u002Fdownload",{"key":130,"label":131,"href":132},"downloads.windows.suiteManager","Windows Suite Manager","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_suite_windows\u002Fappinstaller\u002Fdownload",{"key":134,"label":135,"href":136},"downloads.linux.flatpakRepo","Linux Flatpak repository","https:\u002F\u002Fbuilds.pieces.app\u002Fpieces-flatpak-repo\u002Fpieces-flatpak.flatpakrepo",{"key":138,"label":139,"href":140},"downloads.linux.snapDesktop","Linux Snap Desktop","https:\u002F\u002Fsnapcraft.io\u002Fpieces-for-developers",{"key":142,"label":143,"href":144},"downloads.linux.snapPiecesOS","Linux Snap PiecesOS","https:\u002F\u002Fsnapcraft.io\u002Fpieces-os",{"key":146,"label":147,"href":148},"downloads.linux.snap","Desktop Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fsnap\u002Fdownload",{"key":150,"label":151,"href":152},"downloads.piecesOS.macOS.dmgArm64","PiecesOS macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg-arm64\u002Fdownload",{"key":154,"label":155,"href":156},"downloads.piecesOS.macOS.dmgIntel","PiecesOS macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg\u002Fdownload",{"key":158,"label":159,"href":160},"downloads.piecesOS.macOS.universal","PiecesOS macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fmacos-universal\u002Fdownload",{"key":162,"label":163,"href":164},"downloads.piecesOS.macOS.pkgArm64","PiecesOS macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only-arm64\u002Fdownload",{"key":166,"label":167,"href":168},"downloads.piecesOS.macOS.pkgIntel","PiecesOS macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only\u002Fdownload",{"key":170,"label":171,"href":172},"downloads.piecesOS.windows.appinstaller","PiecesOS Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fos_server.appinstaller",{"key":174,"label":175,"href":176},"downloads.piecesOS.windows.exe","PiecesOS Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-exe\u002Fdownload",{"key":178,"label":179,"href":180},"downloads.piecesOS.windows.msix","PiecesOS Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-msix\u002Fdownload",{"key":182,"label":183,"href":184},"downloads.piecesOS.linux.snap","PiecesOS Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fsnap\u002Fdownload",{"key":186,"label":187,"href":188},"downloads.combined.macOS.appleSilicon","Combined macOS installer Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-arm64\u002Fdownload",{"key":190,"label":191,"href":104},"downloads.combined.macOS.intel","Combined macOS installer Intel",{"key":193,"label":194,"href":195},"downloads.guides.macOS","macOS installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fmacos-installation-guide",{"key":197,"label":198,"href":199},"downloads.guides.windows","Windows installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fwindows-installation-guide",{"key":201,"label":202,"href":203},"downloads.guides.linux","Linux installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide",{"key":205,"label":206,"href":207},"downloads.guides.piecesOS","PiecesOS manual installation","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fmanual-installation",{"key":209,"label":210,"href":211},"extensions.chrome","Chrome extension","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fpieces-save-code-snippets\u002Figbgibhbfonhmjlechmeefimncpekepm",{"key":213,"label":214,"href":215},"extensions.firefox","Firefox add-on","https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fpieces-save-code-from-the-web\u002F",{"key":217,"label":218,"href":219},"extensions.edge","Edge add-on","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fpieces-save-code-snippet\u002Fhglfimcdgonaeeobjckfdabcldfidmim",{"key":221,"label":222,"href":223},"extensions.vscode","VS Code extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.pieces-vscode",{"key":225,"label":226,"href":227},"extensions.visualStudio","Visual Studio extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.PiecesVisualStudio",{"key":229,"label":230,"href":231},"extensions.jetbrains","JetBrains plugin","https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17328-pieces--save-search-share--reuse-code-snippets",{"key":233,"label":234,"href":235},"extensions.obsidian","Obsidian plugin","https:\u002F\u002Fobsidian.md\u002Fplugins?id=pieces-for-developers",{"key":237,"label":238,"href":239},"extensions.sublime","Sublime package","https:\u002F\u002Fpackagecontrol.io\u002Fpackages\u002FPieces",{"key":241,"label":242,"href":243},"extensions.neovim","Neovim plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neo_vim",{"key":245,"label":246,"href":247},"extensions.jupyterlab","JupyterLab plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fjupyterlab-pieces",{"key":249,"label":250,"href":251},"extensions.cli","Pieces CLI","https:\u002F\u002Fpypi.org\u002Fproject\u002Fpieces-cli\u002F",{"key":253,"label":254,"href":255},"docs.home","Documentation home","https:\u002F\u002Fdocs.pieces.app",{"key":257,"label":258,"href":259},"docs.getStarted","Get started docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces",{"key":261,"label":262,"href":263},"docs.api","API docs","https:\u002F\u002Fdocs.pieces.app\u002Fapi",{"key":265,"label":266,"href":267},"docs.desktop.overview","Desktop overview","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop",{"key":269,"label":270,"href":271},"docs.desktop.onboarding","Desktop onboarding","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fonboarding",{"key":273,"label":274,"href":275},"docs.desktop.timeline","Desktop timeline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Ftimeline",{"key":277,"label":278,"href":279},"docs.desktop.summaries","Desktop summaries docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fsingle-click-summaries",{"key":281,"label":282,"href":283},"docs.desktop.search","Desktop conversational search docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconversational-search",{"key":285,"label":286,"href":287},"docs.desktop.drive","Desktop drive docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdrive",{"key":289,"label":290,"href":291},"docs.desktop.account","Desktop account settings docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconfiguration\u002Faccount",{"key":293,"label":294,"href":92},"docs.desktop.download","Desktop download docs",{"key":296,"label":297,"href":298},"docs.piecesOS.overview","PiecesOS overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies",{"key":300,"label":301,"href":302},"docs.piecesOS.details","PiecesOS details docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os",{"key":304,"label":305,"href":207},"docs.piecesOS.install","PiecesOS install docs",{"key":307,"label":308,"href":309},"docs.piecesOS.quickMenu","PiecesOS quick menu docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fquick-menu",{"key":311,"label":312,"href":313},"docs.piecesOS.storage","On-device storage docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fon-device-storage",{"key":315,"label":316,"href":317},"docs.piecesOS.troubleshooting","PiecesOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Ftroubleshooting",{"key":319,"label":320,"href":321},"docs.mcp.overview","MCP overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp",{"key":323,"label":324,"href":325},"docs.mcp.cursor","MCP Cursor docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcursor",{"key":327,"label":328,"href":329},"docs.mcp.vscode","MCP VS Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fvs-code",{"key":331,"label":332,"href":333},"docs.mcp.claudeDesktop","MCP Claude Desktop docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-desktop",{"key":335,"label":336,"href":337},"docs.mcp.claudeCode","MCP Claude Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-code",{"key":339,"label":340,"href":341},"docs.mcp.claudeCowork","MCP Claude Cowork docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-cowork",{"key":343,"label":344,"href":345},"docs.mcp.githubCopilot","MCP GitHub Copilot docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgithub-copilot",{"key":347,"label":348,"href":349},"docs.mcp.goose","MCP Goose docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoose",{"key":351,"label":352,"href":353},"docs.mcp.windsurf","MCP Windsurf docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fwindsurf",{"key":355,"label":356,"href":357},"docs.mcp.zed","MCP Zed docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fzed",{"key":359,"label":360,"href":361},"docs.mcp.jetbrains","MCP JetBrains docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fjetbrains-ides",{"key":363,"label":364,"href":365},"docs.mcp.continueDev","MCP Continue docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcontinue-dev",{"key":367,"label":368,"href":369},"docs.mcp.cline","MCP Cline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcline",{"key":371,"label":372,"href":373},"docs.mcp.raycast","MCP Raycast docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fraycast",{"key":375,"label":376,"href":377},"docs.mcp.rovoDevCli","MCP Rovo Dev CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Frovo-dev-cli",{"key":379,"label":380,"href":381},"docs.mcp.openaiCodexCli","MCP OpenAI Codex CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenai-codex-cli",{"key":383,"label":384,"href":385},"docs.mcp.googleGeminiCli","MCP Google Gemini CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoogle-gemini-cli",{"key":387,"label":388,"href":389},"docs.mcp.amazonQ","MCP Amazon Q docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Famazon-q-developer",{"key":391,"label":392,"href":393},"docs.mcp.chatgptDev","MCP ChatGPT Developer Mode docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fchatgpt-developer-mode",{"key":395,"label":396,"href":397},"docs.mcp.openclaw","MCP OpenClaw docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenclaw",{"key":399,"label":400,"href":401},"docs.mcp.mcpRemote","MCP Remote docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fmcp-remote",{"key":403,"label":404,"href":405},"docs.mcp.ngrok","MCP ngrok docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fngrok-setup",{"key":407,"label":408,"href":409},"docs.troubleshooting.macOS","macOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fmacos",{"key":411,"label":412,"href":413},"docs.troubleshooting.windows","Windows troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fwindows",{"key":415,"label":416,"href":417},"docs.troubleshooting.linux","Linux troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Flinux",{"key":419,"label":420,"href":421},"docs.privacy","Privacy and security docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fprivacy-security-your-data",{"key":423,"label":424,"href":425},"docs.support","Support docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fsupport",{"key":427,"label":428,"href":429},"portal.home","Pieces portal","https:\u002F\u002Fportal.pieces.app",{"key":431,"label":432,"href":433},"site.home","Website home","https:\u002F\u002Fpieces.app",{"key":435,"label":436,"href":437},"site.about","About page","https:\u002F\u002Fpieces.app\u002Fabout",{"key":439,"label":440,"href":441},"site.features","Features page","https:\u002F\u002Fpieces.app\u002Ffeatures",{"key":443,"label":444,"href":445},"site.plugins","Plugins page","https:\u002F\u002Fpieces.app\u002Fplugins",{"key":447,"label":448,"href":449},"site.contact","Contact page","https:\u002F\u002Fpieces.app\u002Fcontact",{"key":451,"label":58,"href":452},"site.updates","https:\u002F\u002Fpieces.app\u002Fupdates",{"key":454,"label":455,"href":456},"site.news","News","https:\u002F\u002Fpieces.app\u002Fnews",{"key":458,"label":459,"href":460},"site.events","Community events","https:\u002F\u002Fpieces.app\u002Fcommunity\u002Fevents",{"key":462,"label":463,"href":464},"site.userStories","User stories","https:\u002F\u002Fpieces.app\u002Fuser-stories",{"key":466,"label":467,"href":468},"site.academy","Academy","https:\u002F\u002Fpieces.app\u002Flearn\u002Facademy",{"key":470,"label":471,"href":472},"site.support","Website support","https:\u002F\u002Fpieces.app\u002Fsupport",{"key":474,"label":475,"href":476},"site.standup","Standup","https:\u002F\u002Fpieces.app\u002Fstandup",{"key":478,"label":34,"href":479},"site.blog","https:\u002F\u002Fcode.pieces.app\u002Fblog",{"key":481,"label":43,"href":482},"social.discord","https:\u002F\u002Fdiscord.gg\u002Fgetpieces",{"key":484,"label":46,"href":485},"social.x","https:\u002F\u002Fx.com\u002Fgetpieces",{"key":487,"label":488,"href":485},"social.twitter","Twitter",{"key":490,"label":491,"href":492},"social.instagram","Instagram","https:\u002F\u002Fwww.instagram.com\u002Fgetpieces\u002F",{"key":494,"label":495,"href":496},"social.tiktok","TikTok","https:\u002F\u002Fwww.tiktok.com\u002F@getpieces",{"key":498,"label":49,"href":499},"social.linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fgetpieces\u002F",{"key":501,"label":502,"href":503},"social.youtube","YouTube","https:\u002F\u002Fyoutube.com\u002F@getpieces",{"key":505,"label":506,"href":507},"github.org","GitHub organization","https:\u002F\u002Fgithub.com\u002Fpieces-app",{"key":509,"label":510,"href":511},"github.support","GitHub support","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport",{"key":513,"label":514,"href":515},"github.issues","GitHub issues","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fissues",{"key":517,"label":518,"href":519},"github.discussions","GitHub discussions","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fdiscussions",{"key":521,"label":522,"href":523},"github.documentation","GitHub documentation","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fdocumentation",{"key":525,"label":526,"href":527},"github.opensource","GitHub open source","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fopensource",{"key":529,"label":530,"href":531},"github.sdks.python","Python SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-python",{"key":533,"label":534,"href":535},"github.sdks.typescript","TypeScript SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-typescript",{"key":537,"label":538,"href":539},"github.sdks.dart","Dart SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-dart",{"key":541,"label":542,"href":543},"github.sdks.kotlin","Kotlin SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-kotlin",{"key":545,"label":546,"href":547},"github.plugins.obsidian","Obsidian plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fobsidian-pieces",{"key":549,"label":550,"href":247},"github.plugins.jupyterlab","JupyterLab plugin repository",{"key":552,"label":553,"href":554},"github.plugins.sublime","Sublime plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_sublime",{"key":556,"label":557,"href":558},"github.plugins.neovim","Neovim plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neovim",{"key":560,"label":561,"href":562},"github.cliAgent","CLI agent repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fcli-agent",{"key":564,"label":565,"href":566},"github.mcpDart","MCP Dart repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fmcp_dart",{"key":568,"label":569,"href":570},"github.awesomePieces","Awesome Pieces repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fawesome-pieces",{"key":572,"label":573,"href":66},"legal.privacyPolicy","Privacy policy",{"key":575,"label":576,"href":69},"legal.refundPolicy","Refund policy",{"key":578,"label":579,"href":72},"legal.terms","Terms",{"key":581,"label":582,"href":583},"legal.security","Legal security","https:\u002F\u002Fpieces.app\u002Flegal\u002Fsecurity",{"key":585,"label":586,"href":503},"videos.youtubeChannel","YouTube channel",{"key":588,"label":589,"href":590},"videos.gettingStartedDesktop","Getting started desktop video","https:\u002F\u002Fyoutu.be\u002FdUr1lRM_TYk",{"key":592,"label":593,"href":594},"videos.snippetDiscoveryxR","Snippet discovery video","https:\u002F\u002Fyoutu.be\u002FG6vb1USw-30",{"key":596,"label":597,"href":598},"sales.bookACall","Book a sales call","https:\u002F\u002Fcalendar.app.google\u002FWVUDtUfNy5Vst3sH7",{"key":600,"label":601,"href":602},"sales.enterprise","Enterprise form","https:\u002F\u002Fgetpieces.typeform.com\u002Fto\u002FaVQFTvpE",{"key":604,"label":605,"href":519},"sales.feedback","Feedback discussions",{"key":607,"label":608,"href":609},"sales.earlyAccess","Early access form","https:\u002F\u002Fgetpieces.typeform.com\u002Fearlyaccess",{"key":611,"label":612,"href":613},"sales.supportEmail","Support email","mailto:support@pieces.app",{"key":615,"label":616,"href":19},"routes.home","Home route",{"key":618,"label":619,"href":56},"routes.about","About route",{"key":621,"label":622,"href":12},"routes.downloads","Downloads route",{"key":624,"label":625,"href":626},"routes.thanks","Post-install thanks route","\u002Finstall\u002Fthanks",{"key":628,"label":629,"href":630},"routes.pricing","Pricing route","\u002Fpricing",{"key":632,"label":633,"href":634},"cta.freeTrial","Start free trial CTA (Pieces Pro) — used by \u002Fcampaigns\u002F* landing pages","https:\u002F\u002Fcampaigns.pieces.app\u002F",{"key":636,"label":637,"href":22},"routes.enterprise","Enterprise route",{"key":639,"label":640,"href":62},"routes.contact","Contact route",{"key":642,"label":643,"href":59},"routes.updates","Updates route",{"key":645,"label":646,"href":647},"routes.migrationError","Migration error route","\u002Fmigration\u002Ferror",{"key":649,"label":650,"href":651},"routes.authenticated","Post-login authenticated route","\u002Fauth\u002Fsigned-in",{"key":653,"label":654,"href":655},"routes.signed-out","Signed out route","\u002Fauth\u002Fsigned-out",{"key":657,"label":658,"href":659},"routes.authentication-error","Authentication error route","\u002Fauth\u002Ferror",{},"data\u002Fshared\u002Furls","NLkVE1lIUws518K-1QsSB6T-GvlXYIzcRL1HDhqarGQ",{"id":664,"title":665,"author":666,"authorPhoto":667,"authorPhotoAlt":668,"authorSlug":669,"body":670,"buttonText":668,"buttonUrl":668,"category":1035,"date":1036,"description":1037,"draft":1038,"editorsPick":1038,"extension":1039,"featured":1038,"image":1040,"imageAlt":1041,"meta":1042,"navigation":32,"ogImage":668,"ogImageAlt":668,"path":1043,"seo":1044,"stem":1045,"tags":1046,"__hash__":1048},"blog\u002Fblog\u002Fusing-css-to-create-a-skeleton-screen.md","Using CSS to Create a Skeleton Screen","Ejiro Thankgod","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fflutter-vs-react-native\u002Fauthor.png",null,"ejiro-thankgod",{"type":671,"value":672,"toc":1020},"minimark",[673,677,682,685,688,691,698,701,707,710,713,716,721,740,744,747,750,756,759,765,769,772,783,786,792,807,817,832,838,844,850,864,884,888,891,894,900,904,946,952,956,968,971,977,981,995,999,1007,1012],[674,675,676],"p",{},"Skeleton displays are one component of UX improvement. In this article, we’ll be covering the purpose of skeleton loaders, their significance, and how to create one for a website using React and basic CSS.",[678,679,681],"h2",{"id":680},"what-is-a-skeleton-screen","What is a Skeleton Screen?",[674,683,684],{},"An animated placeholder known as a \"skeleton screen\" simulates a website's design while data is being loaded. Skeleton screens inform the user that some content is loading while also, and perhaps more crucially, indicating whether an image, text, card or other type of data is loading.",[674,686,687],{},"Because the user is aware of the type of content loading before it manifests, the page appears to load more quickly. Perceived performance is what we're talking about here.",[674,689,690],{},"Here are some illustrations of skeleton displays from Medium and Facebook:",[674,692,693],{},[694,695],"img",{"alt":696,"src":697},"medium CSS skeleton display","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fusing-css-to-create-a-skeleton-screen\u002Fimg-001.png",[674,699,700],{},"Medium home feed loading state",[674,702,703],{},[694,704],{"alt":705,"src":706},"facebook CSS skeleton display","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fusing-css-to-create-a-skeleton-screen\u002Fimg-002.png",[674,708,709],{},"Facebook home feed loading state",[674,711,712],{},"The gray shapes indicate how the data will be shown once it has loaded. These images are replaced once the data from the server actually arrives.",[674,714,715],{},"Skeleton loaders seldom improve efficiency or loading speed. They exist solely to provide the visitor with something to look at and the impression that the website is loading more quickly.",[717,718,720],"h3",{"id":719},"notable-qualities-of-skeleton-loaders","Notable Qualities of Skeleton Loaders",[722,723,724,728,731,734,737],"ul",{},[725,726,727],"li",{},"They seem to move more quickly and are easier to utilize. A better user experience and higher conversion rates are both provided by improved perceived performance.",[725,729,730],{},"They give the impression of quickness and quick loading.",[725,732,733],{},"Users have no indication of what is loading or how long it will take with spinners and loaders, which can be a problem.",[725,735,736],{},"Since the load time is unknown, using spinners or loaders puts the user in a state of uncertainty.",[725,738,739],{},"Users might be tempted to move on rather than wait through skeleton screens.",[678,741,743],{"id":742},"build-a-skeleton-loader-with-react","Build a Skeleton Loader with React",[674,745,746],{},"For the purpose of this article's tutorial, we'll build a page that lists blog articles as cards. The final product will resemble the following:",[674,748,749],{},"The skeleton screen:",[674,751,752],{},[694,753],{"alt":754,"src":755},"pieces blog CSS skeleton display","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fusing-css-to-create-a-skeleton-screen\u002Fimg-003.png",[674,757,758],{},"The actual site after loading:",[674,760,761],{},[694,762],{"alt":763,"src":764},"Pieces blog interface","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fusing-css-to-create-a-skeleton-screen\u002Fimg-004.png",[717,766,768],{"id":767},"setting-up-a-react-project","Setting up a React Project",[674,770,771],{},"We'll begin by putting up a React project with the code below in order to use Google Charts in our React application:",[773,774,779],"pre",{"className":775,"code":777,"language":778},[776],"language-text","npx create-react-app react-skeleton\n","text",[780,781,777],"code",{"__ignoreMap":782},"",[674,784,785],{},"Next, let’s change the working directory to the folder established by the previous command with the following code:",[773,787,790],{"className":788,"code":789,"language":778},[776],"cd react-react-skeleton\n",[780,791,789],{"__ignoreMap":782},[674,793,794,795,798,799,802,803,806],{},"Next, we’ll open the folder in our preferred text editor. Now that our app is configured, it's time to add and remove unnecessary boilerplate from it. In the ",[780,796,797],{},"\u002Fsrc"," folder, let’s make a ",[780,800,801],{},"components"," folder, and in the root directory, we’ll make a ",[780,804,805],{},"server"," folder.",[674,808,809,810,812,813,816],{},"We have a ",[780,811,805],{}," folder because we're going to create a structure that resembles a database so we can store information about the blogs. We won't be entering any backend, so don't be concerned. With ",[780,814,815],{},"JSON"," Server, we’ll create a phony REST API.",[674,818,819,820,823,824,827,828,831],{},"Next, let’s create a file named ",[780,821,822],{},"db.json"," or ",[780,825,826],{},"data.json"," in the ",[780,829,830],{},"\u002Fserver"," folder and fill it with some random information typically found on a blog, such as an avatar, author name, thumbnail, title, and description.",[674,833,834,835,837],{},"The contents of our ",[780,836,822],{}," file should resemble something like the image below.",[674,839,840],{},[841,842,843],"em",{},"N.B.: An altered version of data is used in this tutorial due to its enormous size, but you can tweak it to your own style as much as you want.",[773,845,848],{"className":846,"code":847,"language":778},[776],"\u002F\u002Fdb.json\n{\n \"blogs\" : [\n        {\n \"title\" : \"Using regression testing to produce working software\",\n \"thumbnail\" : \"https:\u002F\u002Fblog.pieces.com\u002Fhero_Z1Aauk4.webp\",\n \"avatar\" : \"https:\u002F\u002Fblog.pieces.com\u002Fauthors\u002Favatars\u002Fgoodness-woke.jpg\",\n \"author\" : \"Goodness Woke\",\n \"description\" : \"Lorem ipsum dolor sit amet, consectetur adipisci\"\n        },\n        {\n \"title\" : \"Using regression testing to produce working software\",\n \"thumbnail\" : \"https:\u002F\u002Fblog.pieces.com\u002Fhero_Z1Aauk4.webp\",\n \"avatar\" : \"https:\u002F\u002Fblog.pieces.com\u002Fauthors\u002Favatars\u002Fgoodness-woke.jpg\",\n \"author\" : \"Goodness Woke\",\n \"description\" : \"Lorem ipsum dolor sit amet, consectetur adipisci\"\n        },\n        {\n \"title\" : \"Using regression testing to produce working software\",\n \"thumbnail\" : \"https:\u002F\u002Fblog.pieces.com\u002Fhero_Z1Aauk4.webp\",\n \"avatar\" : \"https:\u002F\u002Fblog.pieces.com\u002Fauthors\u002Favatars\u002Fgoodness-woke.jpg\",\n \"author\" : \"Goodness Woke\",\n \"description\" : \"Lorem ipsum dolor sit amet, consectetur adipisci\"\n        },\n        {\n \"title\" : \"Using regression testing to produce working software\",\n \"thumbnail\" : \"https:\u002F\u002Fblog.pieces.com\u002Fhero_Z1Aauk4.webp\",\n \"avatar\" : \"https:\u002F\u002Fblog.pieces.com\u002Fauthors\u002Favatars\u002Fgoodness-woke.jpg\",\n \"author\" : \"Goodness Woke\",\n \"description\" : \"Lorem ipsum dolor sit amet, consectetur adipisci\"\n        },\n        {\n \"title\" : \"Using regression testing to produce working software\",\n \"thumbnail\" : \"https:\u002F\u002Fblog.pieces.com\u002Fhero_Z1Aauk4.webp\",\n \"avatar\" : \"https:\u002F\u002Fblog.pieces.com\u002Fauthors\u002Favatars\u002Fgoodness-woke.jpg\",\n \"author\" : \"Goodness Woke\",\n \"description\" : \"Lorem ipsum dolor sit amet, consectetur adipisci\"\n        },\n        {\n \"title\" : \"Using regression testing to produce working software\",\n \"thumbnail\" : \"https:\u002F\u002Fblog.pieces.com\u002Fhero_Z1Aauk4.webp\",\n \"avatar\" : \"https:\u002F\u002Fblog.pieces.com\u002Fauthors\u002Favatars\u002Fgoodness-woke.jpg\",\n \"author\" : \"Goodness Woke\",\n \"description\" : \"Lorem ipsum dolor sit amet, consectetur adipisci\"\n        }\n    ]\n}\n",[780,849,847],{"__ignoreMap":782},[674,851,852,853,856,857,856,860,863],{},"We need to run the above file using the JSON Server package so that we can add endpoints to it and conduct operations like ",[780,854,855],{},"POST",", ",[780,858,859],{},"GET",[780,861,862],{},"DELETE",", etc.",[674,865,866,867,870,871,878,879,883],{},"To do that, let’s open a new terminal and run ",[780,868,869],{},"json-server -watch server\u002Fdb.json --port 8000",". If it runs successfully, then the terminal should start the server on port 8000, and we should start watching for any changes. By copying and pasting ",[872,873,877],"a",{"href":874,"rel":875},"http:\u002F\u002Flocalhost:8000\u002F",[876],"nofollow","http:\u002F\u002Flocalhost:8000"," in a browser, we’ll see that the JSON file has been hosted on localhost. We can also see the blog resources on",[872,880,881],{"href":881,"rel":882},"http:\u002F\u002Flocalhost:8000\u002Fblogs",[876],".",[717,885,887],{"id":886},"creating-a-fetch-function-in-appjs","Creating a Fetch Function in App.js",[674,889,890],{},"Let's first retrieve the data from our local server. The data will be shown using a template that we’ll generate after successfully retrieving the data and handling any fetch failures.",[674,892,893],{},"In our app.js:",[773,895,898],{"className":896,"code":897,"language":778},[776],"import { useState, useEffect } from 'react';\nimport Blogs from '.\u002Fcomponents\u002Fblogs';\nimport Skeleton from '.\u002Fcomponents\u002Fskeleton';\nconst App = () => {\n    const [blogs, setBlogs] = useState(null);\n    const [error, setError] = useState(false);\n    const [loading, setLoading] = useState(true);\n    useEffect(() => {\n        setTimeout(() => {\n            fetch(' http:\u002F\u002Flocalhost:8000\u002Fblogs')\n            .then(response => {\n if(!response.ok){\n throw Error('Sorry, some error occurred while fetching your blogs.');\n                }\n return response.json();\n            })\n            .then(data => {\n                setBlogs(data);\n                setLoading(false);\n                setError(false);\n            })\n            .catch(err => {\n console.log(err.message);\n                setError(true);\n            })\n        }, 4000)\n    })\n return(\n                  The Pieces Blog           {blogs &&  }                            {loading && [1,2,3,4,5,6,7].map((n) => )}                       {error && Error connecting to the server. Connection failed.}        \n    )\n}\nexport default App;\n",[780,899,897],{"__ignoreMap":782},[717,901,903],{"id":902},"creating-a-blog-and-skeleton-components","Creating a Blog and Skeleton Components",[674,905,906,907,910,911,914,915,917,918,921,922,856,925,928,929,932,933,856,936,856,939,856,942,945],{},"To continue, we’ll create our ",[780,908,909],{},"blogs.jsx"," and ",[780,912,913],{},"skeleton.jsx"," components. In the ",[780,916,909],{},", we pass in ",[780,919,920],{},"blogs"," as a prop, and then go further to create a template for the different properties of our blog, like ",[780,923,924],{},"blog.title",[780,926,927],{},"blog.description",", etc. While in the skeleton components, we created a function to return a ",[780,930,931],{},"div"," that places our ",[780,934,935],{},"blog",[780,937,938],{},"avatar",[780,940,941],{},"title",[780,943,944],{},"author",", etc., in the right location, and in the correct order:",[773,947,950],{"className":948,"code":949,"language":778},[776],"\u002F\u002Fblogs.js\nconst Blogs = ({blogs}) => {\n    return(\n            {blogs.map(blog => (                                                                                                                                                                                            {blog.author}                                                                                                                                                                                    {blog.title}                           {blog.description}                                                          ))}        \n    );\n}\nexport default Blogs;\n\u002F\u002Fskeleton.js\nconst Skeleton = () => {\n    return(\n                                                                                                                                                                             \n);\n};\nexport default Skeleton;\n",[780,951,949],{"__ignoreMap":782},[717,953,955],{"id":954},"styling-our-skeleton-card","Styling Our Skeleton Card",[674,957,958,959,962,963,883],{},"We removed the styling from ",[780,960,961],{},"index.css"," so that we could substitute with our very own CSS style. You can check out the complete files and folders ",[872,964,967],{"href":965,"rel":966},"https:\u002F\u002Fgithub.com\u002FEJINEROZ\u002Fcss-skeleton\u002Fblob\u002Fmain\u002Fsrc\u002Findex.css",[876],"here",[674,969,970],{},"This is just a grid layout with a typeface. When the Blog component is imported inside the App component, our blog site should now appear as follows:",[674,972,973],{},[694,974],{"alt":975,"src":976},"gif showing the pieces blog CSS skeleton display","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fusing-css-to-create-a-skeleton-screen\u002Fimg-005.gif",[678,978,980],{"id":979},"use-cases-of-skeleton-loader","Use Cases of Skeleton Loader",[722,982,983,986,989,992],{},[725,984,985],{},"Use to alert viewers that something is loading when several elements are loading simultaneously.",[725,987,988],{},"Use when data loading takes longer than three seconds.",[725,990,991],{},"Use on heavily visited websites.",[725,993,994],{},"Use for a lengthy or background process.",[678,996,998],{"id":997},"conclusion","Conclusion",[674,1000,1001,1002,1006],{},"We now understand what skeleton loading is, how it improves user experience by giving the appearance of speedy data loading, and how to put it into practice. The tutorial's source code is available ",[872,1003,967],{"href":1004,"rel":1005},"https:\u002F\u002Fgithub.com\u002FEJINEROZ\u002Fcss-skeleton",[876],". Feel free to modify it, style it to be whatever you like, and add code enhancements.",[674,1008,1009],{},[1010,1011,27],"strong",{},[722,1013,1014],{},[725,1015,1016],{},[872,1017,1019],{"href":1004,"rel":1018},[876],"Github Repo",{"title":782,"searchDepth":1021,"depth":1021,"links":1022},2,[1023,1027,1033,1034],{"id":680,"depth":1021,"text":681,"children":1024},[1025],{"id":719,"depth":1026,"text":720},3,{"id":742,"depth":1021,"text":743,"children":1028},[1029,1030,1031,1032],{"id":767,"depth":1026,"text":768},{"id":886,"depth":1026,"text":887},{"id":902,"depth":1026,"text":903},{"id":954,"depth":1026,"text":955},{"id":979,"depth":1021,"text":980},{"id":997,"depth":1021,"text":998},"Software Development","2022-12-20T00:00:00.000Z","Skeleton displays are one component of UX improvement. In this article, we’ll be covering their purpose and how to create one with React and CSS.",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fusing-css-to-create-a-skeleton-screen\u002Fhero.jpeg","decorative cover image showing a CSS skeleton display wireframe of the pieces blog layout",{},"\u002Fblog\u002Fusing-css-to-create-a-skeleton-screen",{"title":665,"description":1037},"blog\u002Fusing-css-to-create-a-skeleton-screen",[1047],"css; react-7","NLQ2Orau32ynXKg_Gfwfv7WkG_MIWGbI1qP1Xr_jQUY",{"id":1050,"title":666,"body":1051,"description":1055,"draft":1038,"extension":1039,"meta":1058,"navigation":32,"path":1059,"photo":1060,"photoAlt":668,"seo":1061,"stem":1062,"__hash__":1063},"authors\u002Fauthors\u002Fejiro-thankgod.md",{"type":671,"value":1052,"toc":1056},[1053],[674,1054,1055],{},"A talented frontend developer passionate about crafting intuitive and visually engaging user interfaces. With expertise in modern web technologies and a keen eye for design. He focuses on delivering seamless user experiences. Driven by a commitment to clean code and responsive design, they continuously explore innovative solutions to bring ideas to life on the web.",{"title":782,"searchDepth":1021,"depth":1021,"links":1057},[],{},"\u002Fauthors\u002Fejiro-thankgod","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Fejiro-thankgod.jpg",{"title":666,"description":1055},"authors\u002Fejiro-thankgod","1IQvD6PQ9nKIuXoVn4W1HI31bUaqw9azxrnlNXLW20Q",{"left":1065,"top":1065,"width":1066,"height":1066,"rotate":1065,"vFlip":1038,"hFlip":1038,"body":1067},0,24,"\u003Cpath fill=\"currentColor\" d=\"m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z\"\u002F>"]