{"id":3462,"date":"2023-03-11T15:38:10","date_gmt":"2023-03-11T15:38:10","guid":{"rendered":"https:\/\/manorinfinity.com\/?p=3462"},"modified":"2023-03-11T15:38:12","modified_gmt":"2023-03-11T15:38:12","slug":"loading-ui-quite-convenient-feature-in-nextjs-v13","status":"publish","type":"post","link":"https:\/\/manorinfinity.com\/blog\/2023\/03\/11\/loading-ui-quite-convenient-feature-in-nextjs-v13\/","title":{"rendered":"Loading UI: Quite Convenient feature in NextJS v13"},"content":{"rendered":"\n<p>The websites these days are becoming more and more complex. And we have to load things in parts sometimes as micro components. Or maybe lazy loading some components just to better user experience. When we do this we need to create loader for heavy components that is replaced with the component once it is loaded. It is quite an overhead to manage this loader and its loading states. What NextJS v13 did with its new Loading UI feature is that you create a loading.js file and nextjs will take care of managing the loader and its states. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Loading.js<\/h2>\n\n\n\n<p>Just like you have module.scss file convention that allows next to support scss out of the box. With v13 NextJS introduced loading.js which will act as your fallback UI or loader. But, what you need to understand is that this won&#8217;t worker between route changes. As in NextJS route changes are instant and doesn&#8217;t require waiting. In order to use this feature. All you need to do is create a file loading.tsx and add your code for spinner, or any form of loader that you wish to display. Save the file and you are ready to go. <\/p>\n\n\n\n<p>You can also define suspense boundaries for your<a rel=\"noreferrer noopener\" href=\"https:\/\/beta.reactjs.org\/reference\/react\/Suspense\" data-type=\"URL\" data-id=\"https:\/\/beta.reactjs.org\/reference\/react\/Suspense\" target=\"_blank\"> loading.js<\/a>. This is a new feature launched recently. You won&#8217;t find much tutorials on this. So, if you do fall into trouble and have problem implementing loading.js. You can just come and comment right here. I will respond ASAP. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>The websites these days are becoming more and more complex. And we have to load things in parts sometimes as micro components. Or maybe lazy loading some components just to better user experience. When we do this we need to create loader for heavy components that is replaced with the&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/manorinfinity.com\/blog\/2023\/03\/11\/loading-ui-quite-convenient-feature-in-nextjs-v13\/\">Read the post<span class=\"screen-reader-text\">Loading UI: Quite Convenient feature in NextJS v13<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":3499,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[205],"tags":[],"class_list":["post-3462","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-moments","excerpt","zoom","full-without-featured","even","excerpt-0"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.12 (Yoast SEO v26.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Loading UI: Quite Convenient feature in NextJS v13 | ManOrInfinity<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/manorinfinity.com\/blog\/2023\/03\/11\/loading-ui-quite-convenient-feature-in-nextjs-v13\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Loading UI: Quite Convenient feature in NextJS v13\" \/>\n<meta property=\"og:description\" content=\"The websites these days are becoming more and more complex. And we have to load things in parts sometimes as micro components. Or maybe lazy loading some components just to better user experience. When we do this we need to create loader for heavy components that is replaced with the&#8230;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/manorinfinity.com\/blog\/2023\/03\/11\/loading-ui-quite-convenient-feature-in-nextjs-v13\/\" \/>\n<meta property=\"og:site_name\" content=\"ManOrInfinity\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-11T15:38:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-11T15:38:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/manorinfinity.com\/blog\/wp-content\/uploads\/2023\/03\/maxresdefault.png?fit=1280%2C720&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"manorinfinity\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@manorinfinity\" \/>\n<meta name=\"twitter:site\" content=\"@manorinfinity\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"manorinfinity\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/manorinfinity.com\/blog\/2023\/03\/11\/loading-ui-quite-convenient-feature-in-nextjs-v13\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/2023\/03\/11\/loading-ui-quite-convenient-feature-in-nextjs-v13\/\"},\"author\":{\"name\":\"manorinfinity\",\"@id\":\"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/1172b1895b5eb7e49cc8640e49255901\"},\"headline\":\"Loading UI: Quite Convenient feature in NextJS v13\",\"datePublished\":\"2023-03-11T15:38:10+00:00\",\"dateModified\":\"2023-03-11T15:38:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/2023\/03\/11\/loading-ui-quite-convenient-feature-in-nextjs-v13\/\"},\"wordCount\":257,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/1172b1895b5eb7e49cc8640e49255901\"},\"image\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/2023\/03\/11\/loading-ui-quite-convenient-feature-in-nextjs-v13\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/manorinfinity.com\/blog\/wp-content\/uploads\/2023\/03\/maxresdefault.png?fit=1280%2C720&ssl=1\",\"articleSection\":[\"CodeMoments\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/manorinfinity.com\/blog\/2023\/03\/11\/loading-ui-quite-convenient-feature-in-nextjs-v13\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/manorinfinity.com\/blog\/2023\/03\/11\/loading-ui-quite-convenient-feature-in-nextjs-v13\/\",\"url\":\"https:\/\/manorinfinity.com\/blog\/2023\/03\/11\/loading-ui-quite-convenient-feature-in-nextjs-v13\/\",\"name\":\"Loading UI: Quite Convenient feature in NextJS v13 | ManOrInfinity\",\"isPartOf\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/2023\/03\/11\/loading-ui-quite-convenient-feature-in-nextjs-v13\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/2023\/03\/11\/loading-ui-quite-convenient-feature-in-nextjs-v13\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/manorinfinity.com\/blog\/wp-content\/uploads\/2023\/03\/maxresdefault.png?fit=1280%2C720&ssl=1\",\"datePublished\":\"2023-03-11T15:38:10+00:00\",\"dateModified\":\"2023-03-11T15:38:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/2023\/03\/11\/loading-ui-quite-convenient-feature-in-nextjs-v13\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/manorinfinity.com\/blog\/2023\/03\/11\/loading-ui-quite-convenient-feature-in-nextjs-v13\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/manorinfinity.com\/blog\/2023\/03\/11\/loading-ui-quite-convenient-feature-in-nextjs-v13\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/manorinfinity.com\/blog\/wp-content\/uploads\/2023\/03\/maxresdefault.png?fit=1280%2C720&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/manorinfinity.com\/blog\/wp-content\/uploads\/2023\/03\/maxresdefault.png?fit=1280%2C720&ssl=1\",\"width\":1280,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/manorinfinity.com\/blog\/2023\/03\/11\/loading-ui-quite-convenient-feature-in-nextjs-v13\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/manorinfinity.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Loading UI: Quite Convenient feature in NextJS v13\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/manorinfinity.com\/blog\/#website\",\"url\":\"https:\/\/manorinfinity.com\/blog\/\",\"name\":\"ManOrInfinity\",\"description\":\"Thrive towards greatness\",\"publisher\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/1172b1895b5eb7e49cc8640e49255901\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/manorinfinity.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/1172b1895b5eb7e49cc8640e49255901\",\"name\":\"manorinfinity\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/manorinfinity.com\/wp-content\/uploads\/2023\/06\/moi-logo.png\",\"contentUrl\":\"http:\/\/manorinfinity.com\/wp-content\/uploads\/2023\/06\/moi-logo.png\",\"width\":282,\"height\":260,\"caption\":\"manorinfinity\"},\"logo\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Complex Problem Solver, Outloud Thinker, An Outstanding Writer, and a very curious human being\",\"sameAs\":[\"http:\/\/manorinfinity.com\"],\"url\":\"https:\/\/manorinfinity.com\/blog\/author\/manorinfinity\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Loading UI: Quite Convenient feature in NextJS v13 | ManOrInfinity","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/manorinfinity.com\/blog\/2023\/03\/11\/loading-ui-quite-convenient-feature-in-nextjs-v13\/","og_locale":"en_US","og_type":"article","og_title":"Loading UI: Quite Convenient feature in NextJS v13","og_description":"The websites these days are becoming more and more complex. And we have to load things in parts sometimes as micro components. Or maybe lazy loading some components just to better user experience. When we do this we need to create loader for heavy components that is replaced with the&#8230;","og_url":"https:\/\/manorinfinity.com\/blog\/2023\/03\/11\/loading-ui-quite-convenient-feature-in-nextjs-v13\/","og_site_name":"ManOrInfinity","article_published_time":"2023-03-11T15:38:10+00:00","article_modified_time":"2023-03-11T15:38:12+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/i0.wp.com\/manorinfinity.com\/blog\/wp-content\/uploads\/2023\/03\/maxresdefault.png?fit=1280%2C720&ssl=1","type":"image\/png"}],"author":"manorinfinity","twitter_card":"summary_large_image","twitter_creator":"@manorinfinity","twitter_site":"@manorinfinity","twitter_misc":{"Written by":"manorinfinity","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/manorinfinity.com\/blog\/2023\/03\/11\/loading-ui-quite-convenient-feature-in-nextjs-v13\/#article","isPartOf":{"@id":"https:\/\/manorinfinity.com\/blog\/2023\/03\/11\/loading-ui-quite-convenient-feature-in-nextjs-v13\/"},"author":{"name":"manorinfinity","@id":"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/1172b1895b5eb7e49cc8640e49255901"},"headline":"Loading UI: Quite Convenient feature in NextJS v13","datePublished":"2023-03-11T15:38:10+00:00","dateModified":"2023-03-11T15:38:12+00:00","mainEntityOfPage":{"@id":"https:\/\/manorinfinity.com\/blog\/2023\/03\/11\/loading-ui-quite-convenient-feature-in-nextjs-v13\/"},"wordCount":257,"commentCount":0,"publisher":{"@id":"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/1172b1895b5eb7e49cc8640e49255901"},"image":{"@id":"https:\/\/manorinfinity.com\/blog\/2023\/03\/11\/loading-ui-quite-convenient-feature-in-nextjs-v13\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/manorinfinity.com\/blog\/wp-content\/uploads\/2023\/03\/maxresdefault.png?fit=1280%2C720&ssl=1","articleSection":["CodeMoments"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/manorinfinity.com\/blog\/2023\/03\/11\/loading-ui-quite-convenient-feature-in-nextjs-v13\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/manorinfinity.com\/blog\/2023\/03\/11\/loading-ui-quite-convenient-feature-in-nextjs-v13\/","url":"https:\/\/manorinfinity.com\/blog\/2023\/03\/11\/loading-ui-quite-convenient-feature-in-nextjs-v13\/","name":"Loading UI: Quite Convenient feature in NextJS v13 | ManOrInfinity","isPartOf":{"@id":"https:\/\/manorinfinity.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/manorinfinity.com\/blog\/2023\/03\/11\/loading-ui-quite-convenient-feature-in-nextjs-v13\/#primaryimage"},"image":{"@id":"https:\/\/manorinfinity.com\/blog\/2023\/03\/11\/loading-ui-quite-convenient-feature-in-nextjs-v13\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/manorinfinity.com\/blog\/wp-content\/uploads\/2023\/03\/maxresdefault.png?fit=1280%2C720&ssl=1","datePublished":"2023-03-11T15:38:10+00:00","dateModified":"2023-03-11T15:38:12+00:00","breadcrumb":{"@id":"https:\/\/manorinfinity.com\/blog\/2023\/03\/11\/loading-ui-quite-convenient-feature-in-nextjs-v13\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/manorinfinity.com\/blog\/2023\/03\/11\/loading-ui-quite-convenient-feature-in-nextjs-v13\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/manorinfinity.com\/blog\/2023\/03\/11\/loading-ui-quite-convenient-feature-in-nextjs-v13\/#primaryimage","url":"https:\/\/i0.wp.com\/manorinfinity.com\/blog\/wp-content\/uploads\/2023\/03\/maxresdefault.png?fit=1280%2C720&ssl=1","contentUrl":"https:\/\/i0.wp.com\/manorinfinity.com\/blog\/wp-content\/uploads\/2023\/03\/maxresdefault.png?fit=1280%2C720&ssl=1","width":1280,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/manorinfinity.com\/blog\/2023\/03\/11\/loading-ui-quite-convenient-feature-in-nextjs-v13\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/manorinfinity.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Loading UI: Quite Convenient feature in NextJS v13"}]},{"@type":"WebSite","@id":"https:\/\/manorinfinity.com\/blog\/#website","url":"https:\/\/manorinfinity.com\/blog\/","name":"ManOrInfinity","description":"Thrive towards greatness","publisher":{"@id":"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/1172b1895b5eb7e49cc8640e49255901"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/manorinfinity.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/1172b1895b5eb7e49cc8640e49255901","name":"manorinfinity","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/image\/","url":"http:\/\/manorinfinity.com\/wp-content\/uploads\/2023\/06\/moi-logo.png","contentUrl":"http:\/\/manorinfinity.com\/wp-content\/uploads\/2023\/06\/moi-logo.png","width":282,"height":260,"caption":"manorinfinity"},"logo":{"@id":"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/image\/"},"description":"Complex Problem Solver, Outloud Thinker, An Outstanding Writer, and a very curious human being","sameAs":["http:\/\/manorinfinity.com"],"url":"https:\/\/manorinfinity.com\/blog\/author\/manorinfinity\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/manorinfinity.com\/blog\/wp-content\/uploads\/2023\/03\/maxresdefault.png?fit=1280%2C720&ssl=1","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/posts\/3462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/comments?post=3462"}],"version-history":[{"count":3,"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/posts\/3462\/revisions"}],"predecessor-version":[{"id":3500,"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/posts\/3462\/revisions\/3500"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/media\/3499"}],"wp:attachment":[{"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/media?parent=3462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/categories?post=3462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/tags?post=3462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}