DEV Community: Code With Joseph

Why is the useEffect hook used in fetching data in React?

Code With Joseph — Tue, 11 Jun 2024 15:50:29 +0000

To make this as simple as possible, I'll avoid talking about Next.js. So you want to fetch data from a server? What's the first thing that comes to your mind? Create a function to handle the request. That makes sense. What could go wrong here?

import React, { useState } from 'react';

function FetchDataComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  // Bad practice: Fetching data directly within the component rendering logic
  const fetchData = async () => {
    setLoading(true);
    setError(null);

    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      const data = await response.json();
      setData(data);
    } catch (error) {
      setError(error.message);
    } finally {
      setLoading(false);
    }
  };

  // Simulating a bad approach: Directly calling fetchData within the component rendering logic
  fetchData();

  return (
    <div className="fetch-data-container">
      <h1>Fetch Data Example</h1>
      {loading && <p>Loading...</p>}
      {error && <p>Error: {error}</p>}
      {data && (
        <div>
          <h2>{data.title}</h2>
          <p>{data.body}</p>
        </div>
      )}
    </div>
  );
}

export default FetchDataComponent;

Back to React basics

I think this is a straightforward answer. Infinite loops! Because when the state of a component changes, the component and its children get re-rendered. Using a useState hook to modify the state without any constraints causes an infinite loop to occur.

Effects! Effects! Effects!

Effects should happen after the render phase of your component. Effects usually happen when the state of a component changes, the props of a component change, DOM manipulation, data fetching, and even user interaction causes effects to happen which causes a component to re-render. By using a useEffect hook, you make sure the effect happens after the initial render and also re-renders depending on what is placed in the dependency array (the second parameter) of the useEffect hook. This means if the dependency array is empty, it only runs once.

Add a `useEffect` hook, right?

Let's say I add a useEffect hook, we get controlled effects, and we can make sure the effects only occur once after the initial render. Plus, sometimes we only want to fetch data once.

import React, { useState, useEffect } from 'react';

function FetchDataComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      setError(null);

      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const data = await response.json();
        setData(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []); // Empty dependency array means this effect runs once after the initial render

  return (
    <div className="fetch-data-container">
      <h1>Fetch Data Example</h1>
      {loading && <p>Loading...</p>}
      {error && <p>Error: {error}</p>}
      {data && (
        <div>
          <h2>{data.title}</h2>
          <p>{data.body}</p>
        </div>
      )}
    </div>
  );
}

export default FetchDataComponent;

But is something missing?

It can't be that simple. Can it? What happens when you want to change the data you fetched because of user interaction? A lot of the time, data isn't static in a React application. Let's assume we want to create a product listing app that fetches different items based on different categories.

import React, { useState, useEffect } from 'react';

const categories = ['Electronics', 'Clothing', 'Books'];

function ProductListComponent() {
  const [selectedCategory, setSelectedCategory] = useState(null);
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (!selectedCategory) return;

    const fetchProducts = async () => {
      setLoading(true);
      setError(null);

      try {
        // Simulate fetching data from an API based on the selected category
        const response = await fetch(`https://api.example.com/products?category=${selectedCategory}`);
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const data = await response.json();
        setProducts(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchProducts();
  }, [selectedCategory]);

  return (
    <div className="product-list-container">
      <h1>Product List</h1>
      <div>
        {categories.map(category => (
          <button key={category} onClick={() => setSelectedCategory(category)}>
            {category}
          </button>
        ))}
      </div>
      {loading && <p>Loading...</p>}
      {error && <p>Error: {error}</p>}
      {products.length > 0 && (
        <ul>
          {products.map(product => (
            <li key={product.id}>
              <h2>{product.name}</h2>
              <p>Price: ${product.price}</p>
              <p>{product.description}</p>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default ProductListComponent;

`useEffect` can't provide everything

useEffect shines when you're trying to control effects in your app, but for data fetching, the concept doesn't reach far.

Loading & Error States

You must have noticed that I've been manually setting loading and error states. Which creates extra lines of code and complexity.

Race Conditions

A race condition occurs when multiple asynchronous tasks are trying to update the same value at the same time. Since there are three different buttons to fetch different data for each, a request to fetch one category might be slower than the other. Making your state unpredictable and inconsistent.

Example of a race condition

Let's assume a user clicks on the electronics button, but quickly changes it to the clothing button. The user clicked the clothing button last. The component gets re-rendered, but the previous fetch is still happening simultaneously with the new one. So clothing data should show up? If the request for fetching electronics data was slower than clothing, electronics should finish last. And that's the data that'll show up. This makes the state inconsistent, like the user didn't click the clothing button last.

How to fix a race condition

You can fix this issue by using a cleanup function in your useEffect and a boolean flag. This is a solution from the React official docs. The way this works is through closures. When the component is re-rendered, the cleanup function updates the state of the previous effect using the ignore boolean flag. You can also add AbortController and AbortSignal to prevent unnecessary network traffic from the user.

useEffect(() => {
  if (!selectedCategory) return;

  let ignore = true; // Flag to track component mount status

  const fetchProducts = async () => {
    setLoading(true);
    setError(null);

    try {
      const response = await fetch(`https://api.example.com/products?category=${selectedCategory}`);
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      const data = await response.json();
      if (ignore) {
        setProducts(data);
      }
    } catch (error) {
      if (ignore) {
        setError(error.message);
      }
    } finally {
      if (ignore) {
        setLoading(false);
      }
    }
  };

  fetchProducts();

  // Cleanup function to set the flag to false
  return () => {
    ignore = false;
  };
}, [selectedCategory]);

Lack of caching

You have to manually cache your data for every request when using the useEffect hook to fetch data. Caching helps with a good user experience. Caching is important because it makes your app seem fast, let's assume a user clicks to another page and then goes back, without caching the user will see a loader (if you have one) again because the data was re-fetched again.

Fix for caching

We can use the browser's local storage to save the fetched data and use it when needed.

useEffect(() => {
    if (!selectedCategory) return;

    // Check if data is available in local storage
    const cachedData = localStorage.getItem(`products_${selectedCategory}`);
    if (cachedData) {
      setProducts(JSON.parse(cachedData));
      return;
    }

    let ignore = false; // Flag to track component unmount status

    const fetchProducts = async () => {
      setLoading(true);
      setError(null);

      try {
        const response = await fetch(`https://api.example.com/products?category=${selectedCategory}`);
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const data = await response.json();
        if (!ignore) {
          setProducts(data);
          localStorage.setItem(`products_${selectedCategory}`, JSON.stringify(data)); // Save data to local storage
        }
      } catch (error) {
        if (!ignore) {
          setError(error.message);
        }
      } finally {
        if (!ignore) {
          setLoading(false);
        }
      }
    };

    fetchProducts();

    // Cleanup function to set the flag to true
    return () => {
      ignore = true;
    };
  }, [selectedCategory]);

Refetches

In some apps, you might build, the data you fetch has to change constantly. To avoid it from getting stale, you need to perform background updates and re-fetches. The number of available products could change or the number of reviews could also change.

Let's add a quick fix

We can use an interval to re-fetch the data and then clear the interval in the cleanup function.

// UseEffect to fetch data when selectedCategory changes
  useEffect(() => {
    if (!selectedCategory) return;

    // Check if data is available in local storage
    const cachedData = localStorage.getItem(`products_${selectedCategory}`);
    if (cachedData) {
      setProducts(JSON.parse(cachedData));
    } else {
      fetchProducts(selectedCategory);
    }

    let ignore = false; // Flag to track component unmount status

    // Interval for refetching data periodically
    const intervalId = setInterval(() => {
      fetchProducts(selectedCategory, ignore);
    }, 60000); // Refetch every 60 seconds

    // Cleanup function to clear the interval and set the flag to true
    return () => {
      clearInterval(intervalId);
      ignore = true;
    };
  }, [selectedCategory]);

Let's bring in React Query

From all these problems we weren't just talking about data fetching we were also talking about managing the state in the app properly. React Query isn't just for data fetching, it's an async state manager. It fixes all the bugs from the useEffect hook. It comes with caching, error & loading states, automatic query invalidation & re-fetches, and no race conditions. There are other data-fetching libraries like SWR, but React Query has better flexibility with its features, is more performant, and has a larger community.

How does it look like as a solution?

Well now, React Query fixes those bugs better and your code is more concise and easier to read. React Query manages the complexities of managing your state properly.

import React, { useState } from 'react';
import { useQueryClient, useQuery, useMutation } from 'react-query';

const categories = ['Electronics', 'Clothing', 'Books'];

function ProductListComponent() {
  const queryClient = useQueryClient();
  const [selectedCategory, setSelectedCategory] = useState(null);

  // Query to fetch products
  const fetchProducts = async (category) => {
    const response = await fetch(`https://api.example.com/products?category=${category}`);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  };

  // Mutation to fetch products and invalidate the query
  const mutation = useMutation(fetchProducts, {
    onSuccess: (data, variables) => {
      // Invalidate and refetch
      queryClient.setQueryData(['products', variables], data);
      queryClient.invalidateQueries(['products', variables]);
    },
  });

  // Query to get products
  const { data: products, isLoading, isError } = useQuery(
    ['products', selectedCategory],
    () => fetchProducts(selectedCategory),
    {
      enabled: !!selectedCategory, // Only fetch when selectedCategory is truthy
      staleTime: 5 * 60 * 1000, // Cache data for 5 minutes
    }
  );

  // Handler for category selection
  const handleCategoryClick = (category) => {
    setSelectedCategory(category);
    mutation.mutate(category);
  };

  return (
    <div className="product-list-container">
      <h1>Product List</h1>
      <div>
        {categories.map(category => (
          <button key={category} onClick={() => handleCategoryClick(category)}>
            {category}
          </button>
        ))}
      </div>
      {isLoading && <p>Loading...</p>}
      {isError && <p>Error fetching data</p>}
      {products && (
        <ul>
          {products.map(product => (
            <li key={product.id}>
              <h2>{product.name}</h2>
              <p>Price: ${product.price}</p>
              <p>{product.description}</p>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default ProductListComponent;

At least now, you can see why the useEffect hook isn't the best thing when managing async state in your app. It might be okay for fetching data, but it doesn't have enough features to make state predictable. So you can fetch your data without React Query. But with React Query your code and your state become more maintainable.

Resources

https://dev.to/amrguaily/useeffect-some-issues-with-data-fetching-in-effects-21nn
https://dev.to/sakethkowtha/react-query-vs-useswr-122b
https://tkdodo.eu/blog/why-you-want-react-query
https://medium.com/@omar1.mayallo4/react-hooks-useeffect-problems-in-data-fetching-5e2abc37a1c9
https://www.youtube.com/watch?v=SYs5E4yrtpY

You can hear more from me on:
Twitter (X) | Instagram

Simplest guide to Next.js APIs

Code With Joseph — Fri, 07 Jun 2024 00:12:41 +0000

What Makes Next.js APIs So Special?

I'm assuming you know what APIs are. APIs are an important part of developing functional web apps. Next.js has introduced the feature to create route handlers for APIs since version 9.0 in 2019. There are lots of ways to build a separate backend (like Ruby, PHP, Express.js, Django, etc.) other than Next.js, so why even do it in Next.js?.

It might not be that great

By default, Next.js route handlers use serverless functions, which means in some cases you might have cold starts, high cost for scaling, and vendor lock-in since it requires serverless platforms like Vercel to work properly. It also has limitations when it comes to using complex middleware, unlike a library like Express.js, which was meant to be used for routing on a server.

But it's not that bad

But most of these issues are automatically taken care of by Vercel (which provides amazing caching & optimization strategies) and serverless functions can be scalable and cost-effective if done properly. Here are some more benefits of using Next.js as both your frontend and backend:

Hot reloading: This means when developing, you get the same hot reload features as your frontend for your API routes, which makes development faster.
Consistency of your codebase: It greatly simplifies development by keeping the frontend and backend logic in the same place.
File-based routing: API routes use a simple file-based routing system that easily integrates into your Next.js project structure.
No additional setup: There's no need to configure additional middleware or create a separate server.
Simplication: It has built-in features to simplify common tasks when developing your API.

API routes in the Next.js app router

The app router uses a file-based routing system that starts from the app directory. You can mirror URL paths by defining API routes in a nested folder structure. By doing this, you create Node.js serverless functions that act as API endpoints.

app/
└── api/
    └── hello/
        └── route.js

Creating API routes

The API route file is usually named route.js or route.ts (for TypeScript users). This has to be in an api folder in the app folder. You can define functions in the route.js files that handle different HTTP methods (such as GET, POST, PUT, PATCH, etc.). For example, when you can make a GET request to /api/hello it would be handled by a GET function in app/api/hello/route.js.

Request methods and API route functions

The standard convention is that within the route.js or route.ts file, you name an exported function with the HTTP method you want it to handle in your API endpoint in uppercase. The functions usually look like this:

// app/api/users/route.js

export async function GET(request) {
  // Simulate a database call to fetch users
  const users = [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' },
  ];

  // Return the users as a JSON response
  return NextResponse.json(users);
}

NextResponse and Request

The NextResponse is a helper class that extends the web Response API with additional convenience methods, which are used to create responses. You can use it to rewrite, redirect, set headers, or create and send JSON responses.

The Request: When you define functions by using HTTP methods in creating your API endpoints, the functions receive a Request object as an argument which contains information about the incoming request. The object uses the web Request API. You can use it to read the request query parameters, read the request body, or access the request headers.

Dynamic routes

By using square brackets, when naming your folders before the route.ts or route.js file, you can create a dynamic route for your API.

app/
  └── api/
      └── users/
          └── [userId]/
              └── route.ts

Accessing a dynamic route

The dynamic route parameters can be accessed from the route handler function's second argument, which has the params object.
Take a look at this example:

// app/api/users/[userId]/route.ts

export async function GET(request: Request, { params }: { params: { userId: string }}) {
const {userId} = params

  // Simulate a database call to fetch users
  const users = [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' },
  ];

  //filter user by id
  const user = users.filter((user) => user.id == userId)

  // Return the users as a JSON response
  return NextResponse.json(user);
}

I hope that wasn't complicated, and you got something out of this.
You can hear more from me on:
Twitter (X) | Instagram

How to quickly add a rich text editor to your Next.js project using TipTap

Code With Joseph — Wed, 05 Jun 2024 03:20:04 +0000

Tiptap is an open source headless wrapper around ProseMirror. ProseMirror is a toolkit for building rich text WYSIWYG editors. The best part about Tiptap is that it's headless, which means you can customize and create your rich text editor however you want. I'll be using TailwindCSS for this tutorial.

How to get Tiptap working

Step 1 - Install Tiptap into your project

Tiptap is framework-agnostic, it integrates with many popular frameworks, even PHP and vanilla JavaScript.
There are three packages (@tiptap/react, @tiptap/pm, and @tiptap/starter-kit) you need to install that provide all the necessary extensions for you to add Tiptap to your Next.js project.

npm install @tiptap/react @tiptap/pm @tiptap/starter-kit

Step 2 - Create a Tiptap component

To use Tiptap in your next.js project, you need to add a new Component. And add this piece of code to it.

'use client'

import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'

const Tiptap = () => {
  const editor = useEditor({
    extensions: [
      StarterKit,
    ],
    content: '<p>Hello World! 🌎️</p>',
  })

  return (
    <EditorContent editor={editor} />
  )
}

export default Tiptap

Let me break it down. Starterkit is a collection of the most useful extensions in Tiptap for getting started. Extensions are a powerful way to extend the functionality of your Tiptap editor, for example, the History plugin that helps you track changes when editing your document and provides redo and undo options. useEditor is a hook provided by Tiptap that it initializes an editor instance. This instance provides the interface through which you can interact with the editor's functionality. EditorContent binds your editor instance and the DOM element where your content is rendered. The content property is optional, but it determines the initial state of your editor. That's all you need to get your rich text editor up and running with Tiptap.

Customizing your editor

Since Tiptap comes raw, it allows you to choose how your editor looks like. By default, it doesn't come with a menu bar for editing your document, but you can add it by using the slotBefore prop in EditorContent. What the slotBefore prop does is that it tells EditorContent that there should be some content at the top of the editor. To create our menu bar, we can just use buttons. Let's create a menu bar and add a button to toggle boldness.

 <div className="flex flex-wrap gap-2">
 <button
        onClick={() => editor.chain().focus().toggleBold().run()}
        disabled={!editor.can().chain().focus().toggleBold().run()}
        className={editor.isActive("bold") ? "is-active" : ""}
      >
        bold
      </button>
</div>

That feels like a lot, doesn't it? Let me take it slowly. The commands that are passed into the onClick prop, and the disabled prop are a chain of commands. Each of them is explained below:

editor should be a Tiptap instance,
chain() is used to tell the editor you want to execute multiple commands,
focus() sets the focus back to the editor,
toggleBold() marks the selected text bold, or removes the bold mark from the text selection if it’s already applied and
run() will execute the chain.
isActive() checks if something is applied to the selected text already.
!editor.can(): Checks if the toggleBold command can be executed. If it can't, the ! operator negates the result.

I'm also using an is-active class to provide UI feedback when the button is toggled.

Now, the Tiptap component should look like this:

'use client'

import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'

const Tiptap = () => {
  const editor = useEditor({
    extensions: [
      StarterKit,
    ],
    content: '<p>Hello World! 🌎️</p>',
  })

  return (
    <EditorContent editor={editor} slotBefore={<div className="flex flex-wrap gap-2">
 <button
        onClick={() => editor.chain().focus().toggleBold().run()}
        disabled={!editor.can().chain().focus().toggleBold().run()}
        className={editor.isActive("bold") ? "is-active" : ""}
      >
        bold
      </button>
</div>} />
  )
}

export default Tiptap

You can add more buttons to toggle more things in your text like headings, paragraphs, redo/undo, blockquotes, bullet lists, and a lot more.

(Optional) Use the `@tailwindcss/typography` to get the best typography styles for your editor

The @tailwindcss/typography plugin applies typography styles to your HTML elements that follow best practices. By default, TailwindCSS applies minimalistic styles and it may not include detailed typography styles. The content on your Tiptap editor is rendered as HTML by using this plugin you're telling your editor to inherit the typography styles provided by TailwindCSS such as margins, font styles, etc.

npm install --save-dev @tailwindcss/typography

You can use it by installing and then adding it to your list of plugins in your tailwind.config.ts or tailwind.config.js file:

import { defineConfig } from 'tailwindcss';

export default defineConfig({
  mode: 'jit',
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'), // Add the typography plugin
    // other plugins
  ],
});

All you have to do is to add the plugin. Your Tailwind config file might look different from this, but it's only the plugin that's necessary.

Generating an output from your editor

There are two ways you can get your content from Tiptap. The first way is through JSON, and the second option is with HTML. Tiptap doesn't support Markdown as an output format. But it supports Markdown when you're editing your content. Here's an example in code:

const json = editor.getJSON()

And for HTML:

const html = editor.getHTML()

You can also listen for changes to store your content continuously as it changes. By adding the onUpdate hook provided by Tiptap that is triggered on every change, generating the data, and storing it:

 const editor = useEditor({
    extensions: [
      StarterKit,
    ],
  // triggered on every change
  onUpdate: ({ editor }) => {
    const json = editor.getJSON()
    // send the content to an API here
  },
    content: '<p>Hello World! 🌎️</p>',
  })

There's also one last option for storing your content, which is y.js. You can head to Tiptap's official docs to learn more about storing your content and how to customize it better.

That's it, that's all you need to get started with Tiptap in your Next.js project.

You can hear more from me on:
Twitter (X) | Instagram

An Easy Guide To Next14 Authentication With Kinde

Code With Joseph — Sat, 01 Jun 2024 01:08:25 +0000

This is a simple tutorial on adding authentication to your Next14 app using Kinde. To follow this tutorial, you need a Kinde account. Kinde is a powerful user authentication service that integrates in minutes. They offer an amazing free tier for their service and the signup process is straightforward.

To continue the signup process, Kinde will ask you to add your business name and a domain name for Kinde to host your app. It also sets a default region for where your data will be stored, but you can modify it if necessary.

After clicking next, it will ask you if you want to start a project from scratch or add Kinde to your existing codebase. Since we're adding Kinde to our Next.js app, I'll choose the latter.

To provide the right docs, Kinde will also ask about the tech you're using on your app. We're using Next.js, so just click that and continue.

To complete the signup process, you need to choose the ways your users can be authenticated with Kinde. By default, Kinde provides email authentication, but you can add other authentication providers like Google or GitHub.

After the signup process is done, Kinde will lay out ways for you to integrate it into your app with their guides. You can just click on the connect to Next.js codebase option.

You will be redirected to a quick start guide for adding Kinde to your existing Next.js project. Scroll down and copy the npm or yarn installation command to install the Kinde Next.js SDK as a dependency. Also, copy the environment variables provided by Kinde into a .env.local file.

npm i @kinde-oss/kinde-auth-nextjs

We're almost done, the last thing you need to do is to create an api folder in your app directory, add an auth folder within it, within the auth folder a dynamic segment that looks like this [kindeauth], add a route.js file to it, and finally copy this inside of it.

import {handleAuth} from "@kinde-oss/kinde-auth-nextjs/server";
export const GET = handleAuth();

🎉You're done! You've successfully added authentication using Kinde to your Next14 app.

To start your auth flow in your app, you use the LoginLink and RegisterLink components.

import {RegisterLink, LoginLink} from "@kinde-oss/kinde-auth-nextjs/components";
<LoginLink>Sign in</LoginLink>
<RegisterLink>Sign up</RegisterLink>

🔥Happy coding!

You hear more from me on:
X

How to host your Next14 app on Netlify in 2 minutes

Code With Joseph — Fri, 31 May 2024 02:03:09 +0000

To follow this tutorial, you need to create a Netlify account and sign in to it, also the code for your Next app should be hosted on an online repository. I’m using GitHub to host the code.

Add a new site🔗:

You will be taken to your Netlify dashboard after you log in. After you click on the add new site button. It will bring up a popup menu, choose the 'import an existing project' option.

Choose your code repository platform👨‍💻:

Click on the platform of your choice and grant Netlify access to it. I'll choose GitHub because I'm using it to host my code.

Pick the repository of your Next.js app👩🏻‍💻:

After choosing a platform, Netlify will show you a list of repositories hosted on your platform. Pick the repository that contains the Next14 app.

Choose the correct branch & build settings⚙️:

Netlify automatically infers if you're using Next.js, the build settings will allow your app to run normally, but you'll also be able to customize your site name, build command, the base directory, and your publish directory here. This is where you can also add your environment variables. If you're using a different branch other than the default main branch, you can switch to it with the select menu. Once you're done, click on deploy 'site name' at the bottom.

You Next14 app is now live⚡

Your site is live! If there were no build errors, all you have to do is wait for Netlify to deploy your site. Once it's done deploying, it'll provide a domain name for you that you can use to visit your site. You might need to reload the page if you're being shown 'site in progress' for a long time.

Happy Coding!
You can hear more from me on:
𝕏 - https://x.com/code_withjoseph