<commit_before>import React, { useRef, lazy, Suspense } from 'react';
import { renderToStaticMarkup } from "react-dom/server";
import { isBrowser } from 'react-device-detect';
//import SmoothScroll from "./components/animations/smoothScroll/SmoothScroll";
import Cursor from "./components/Cursor";
import { ReactComponent as Stripes } from "./stripes.svg";
import './App.css';

// lazy components
const AboutMe = lazy(() => import ("./views/AboutMe"));
const Hobbies = lazy(() => import ("./views/Hobbies"));
const Experience = lazy(() => import ("./views/Experience"));
const Skills = lazy(() => import ("./views/Skills"));
const Projects = lazy(() => import ("./views/Projects"));
const WelcomePage = lazy(() => import ("./views/WelcomePage"));
const WelcomePageInfos = lazy(() => import ("./views/WelcomePageInfos"));
const Education = lazy(() => import ("./views/Education"));
const Footer = lazy(() => import("./views/Footer"));
const renderLoader = () => <p style={{height: "100vh", textAlign: "center"}}>Loading</p>;

function App() {
  const toProject = useRef<HTMLSpanElement>(null);
  const toHomepage = useRef<HTMLSpanElement>(null);
  const toAboutMe = useRef<HTMLSpanElement>(null);
  const toTexts = useRef<HTMLSpanElement>(null);

  const svgString = encodeURIComponent(renderToStaticMarkup(<Stripes />));

  function renderCommon() {
    return (
      <div className="App">
        { isBrowser && <Cursor /> }
        <Suspense fallback={renderLoader()}>
          <div className="App-container">
            <div className="stripes" style={{backgroundImage: `url('data:image/svg+xml;utf8, ${svgString}')`, display: "block"}} />
            <div className="container">
              <span ref={toHomepage}>
                <WelcomePage toAboutMe={toAboutMe} toTexts={toTexts}/>
              </span>
              <span ref={toTexts}>
                <WelcomePageInfos/>
              </span>
              <span ref={toProject}>
               <Projects refTarget={toAboutMe} />
              </span>
              <Experience />
              <Education />
              <span ref={toAboutMe} style={{width: "100%", display: "flex", flexDirection: "column", alignItems: "center"}}>
                <AboutMe />
                <Hobbies />
              </span>
              <Skills />
            </div>
          </div>
          <Footer refTarget={toHomepage}/>
        </Suspense>
      </div>
    );
  }

  /*if(isBrowser) {
    return (
      <SmoothScroll>
        {renderCommon()}
      </SmoothScroll>
    );
  }*/

  return renderCommon();
}

export default App;
<commit_msg>change suspence to display footer and header at first<commit_after>import React, { useRef, lazy, Suspense } from 'react';
import { renderToStaticMarkup } from "react-dom/server";
import { isBrowser } from 'react-device-detect';
//import SmoothScroll from "./components/animations/smoothScroll/SmoothScroll";
import WelcomePage from "./views/WelcomePage";
import Footer from "./views/Footer";
import Cursor from "./components/Cursor";
import { ReactComponent as Stripes } from "./stripes.svg";
import './App.css';

// lazy components
const AboutMe = lazy(() => import ("./views/AboutMe"));
const Hobbies = lazy(() => import ("./views/Hobbies"));
const Experience = lazy(() => import ("./views/Experience"));
const Skills = lazy(() => import ("./views/Skills"));
const Projects = lazy(() => import ("./views/Projects"));
const WelcomePageInfos = lazy(() => import ("./views/WelcomePageInfos"));
const Education = lazy(() => import ("./views/Education"));
const renderLoader = () => <p style={{height: "100vh", textAlign: "center"}}>Loading</p>;

function App() {
  const toProject = useRef<HTMLSpanElement>(null);
  const toHomepage = useRef<HTMLSpanElement>(null);
  const toAboutMe = useRef<HTMLSpanElement>(null);
  const toTexts = useRef<HTMLSpanElement>(null);

  const svgString = encodeURIComponent(renderToStaticMarkup(<Stripes />));

  function renderCommon() {
    return (
      <div className="App">
        { isBrowser && <Cursor /> }
          <div className="App-container">
            <Suspense fallback={renderLoader()}>
            <div className="stripes" style={{backgroundImage: `url('data:image/svg+xml;utf8, ${svgString}')`, display: "block"}} />
            <div className="container">
              <span ref={toHomepage}>
                <WelcomePage toAboutMe={toAboutMe} toTexts={toTexts}/>
              </span>
                <span ref={toTexts}>
                  <WelcomePageInfos/>
                </span>
                <span ref={toProject}>
                 <Projects refTarget={toAboutMe} />
                </span>
                <Experience />
                <Education />
                <span ref={toAboutMe} style={{width: "100%", display: "flex", flexDirection: "column", alignItems: "center"}}>
                  <AboutMe />
                  <Hobbies />
                </span>
                <Skills />
            </div>
            </Suspense>
          </div>
          <Footer refTarget={toHomepage}/>
      </div>
    );
  }

  /*if(isBrowser) {
    return (
      <SmoothScroll>
        {renderCommon()}
      </SmoothScroll>
    );
  }*/

  return renderCommon();
}

export default App;

{'fraction_non_alphanumeric': 0.16695254431103487, 'fraction_numerical': 0.0026681913474366306, 'mean_word_length': 2.6596931659693164, 'pattern_counts': {'":': 0, '<': 75, '<?xml version=': 0, '>': 93, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 2}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5651605', 'n_tokens_mistral': 1557, 'n_tokens_neox': 1496, 'n_words': 343}