Question 283114 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How should I set my spinner loading state?

I’m trying to load a spinner when a user clicks to navigate to the articles page. The spinner should load until the articles data is fetched and then displayed. There is a little delay after a user has clicked to navigate to the page hence the need for a spinner.

I have a custom snipper component <Spinner /> and that’s what I want to be shown when data is being fetched.

At what point do I set the loading as true and false? Here is my code;

import { useState, useEffect } from "react";

import Recent from "../../components/sections/articles/recent";

import Color from "../../components/utils/page.colors.util";

import colors from "../../content/articles/_colors.json";
import settings from "../../content/_settings.json";
import Spinner from "../../components/sections/spinner/Spinner";

//
export default function Articles({ mediumArticles }) {
  const [isLoading, setIsLoading] = useState(false);
  return (
    <>
      {isLoading && <Spinner />}
      <Color colors={colors} />
      <Recent mediumArticles={mediumArticles} />
    </>
  );
}

// This gets called on every request
export async function getServerSideProps({ res }) {
  res.setHeader(
    "Cache-Control",
    "public, s-maxage=600, stale-while-revalidate=59"
  );

  console.log(settings.username.medium);

  const [mediumRSS] = await Promise.all([
    fetch(
      `https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/${settings.username.medium}`
    ),
  ]);

  let [mediumArticles] = await Promise.all([mediumRSS.json()]);

  return { props: { mediumArticles } };
}
Tags:

2

Answers


  1. 0

    you need to use the setStaticPaths function and use the fallback concept, follow the documentation so you can see how it applies: https://nextjs.org/docs/pages/api-reference/functions/get-static-paths

    I hope it helps you

    Login or Signup to reply.
  2. 0

    You can try this way:

    import Color from "../../components/utils/page.colors.util";
import colors from "../../content/articles/_colors.json";
import settings from "../../content/_settings.json";
import Spinner from "../../components/sections/spinner/Spinner";
import Recent from "../../components/sections/recent/Recent";

export default function Articles({ mediumArticles, isLoading }) {
  return (
    <>
      {isLoading && <Spinner />}
      <Color colors={colors} />
      <Recent mediumArticles={mediumArticles} />
    </>
  );
}

export async function getServerSideProps({ res }) {
  res.setHeader(
    "Cache-Control",
    "public, s-maxage=600, stale-while-revalidate=59"
  );

  console.log(settings.username.medium);

  try {
    const [mediumRSS] = await Promise.all([
      fetch(
        `https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/${settings.username.medium}`
      ),
    ]);

    let [mediumArticles] = await Promise.all([mediumRSS.json()]);

    return {
      props: {
        mediumArticles,
        isLoading: false, 
      },
    };
  } catch (error) {
    console.error("Error fetching data:", error);
    
    return {
      props: {
        mediumArticles: null,
        isLoading: false,
      },
    };
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search