Client-side load of string degrees for homepage

Enable static generation for homepage (niceimprovement)
StudentiUniMi · Nov 2, 2023 · 9bbb38a · 9bbb38a
1 parent 701faae
commit 9bbb38a
Show file tree

Hide file tree

Showing 8 changed files with 123 additions and 63 deletions.
diff --git a/components/Atoms/Chip.tsx b/components/Atoms/Chip.tsx
@@ -11,31 +11,37 @@ interface Props {
     outlined?: boolean,
     theme?: Theme,
     className?: string,
-    style?: CSSProperties
+    style?: CSSProperties,
+    isLoading?: boolean
 };
 
 const Chip = (props: Props) => {
     return (
-        <div className={props.className ?? ''} style={Object.assign({
-            backgroundColor: props.outlined || !props.bgColor ? "transparent" : props.bgColor,
+        <div className={`${props.className ?? ''}${props.isLoading ? ' chip-shimmer' : ''}`} style={Object.assign({
+            backgroundColor: props.outlined || !props.bgColor ? "transparent" : props.isLoading ? props.theme?.palette.neutralLight : props.bgColor,
             display: 'inline-flex',
             alignItems: 'center',
             justifyContent: 'center',
             whiteSpace: 'nowrap',
             cursor: 'default',
             borderRadius: 16,
             border: props.outlined && `1px solid ${props.theme?.palette.neutralTertiary}`,
+            width: props.isLoading ? randomIntFromInterval(100,150) : 'auto',
             height: props.size === 'small' ? 24 : 32,
             transition: 'all ease-in 0.1s'
         }, props.style)}>
-            <Text 
+            {!props.isLoading && <Text 
                 variant={"small"} 
                 styles={semibold} 
                 style={{ color: props.textColor, padding: props.size === 'small' ? '0px 8px' : '0px 12px' }}>
                     {props.label}
-            </Text>
+            </Text>}
         </div>
     )
 };
 
+const randomIntFromInterval = (minWidth: number, maxWidth: number) => {
+  return Math.floor(Math.random() * (maxWidth - minWidth + 1) + minWidth);
+};
+
 export default Chip;
diff --git a/components/Courses/GroupItem.tsx b/components/Courses/GroupItem.tsx
@@ -208,9 +208,9 @@ const CourseItem = (props: Props) => {
                 }
 
                 <Text styles={descriptionTextStyles}>
-                    {data.year === -1 && <Chip label={locale?.courses.mainGroup} size="small" textColor={theme.palette.black} bgColor={theme.palette.neutralLight} className="m-1" />}
-                    {yearText !== null && <Chip label={yearText} size="small" textColor={theme.palette.black} bgColor={theme.palette.neutralLighter} className="m-1" />}
-                    {semesterText !== null && <Chip label={semesterText} size="small" textColor={theme.palette.black} bgColor={theme.palette.neutralLighter} />}
+                    {data.year === -1 && <Chip label={locale?.courses.mainGroup} size="small" textColor={theme.palette.black} bgColor={theme.palette.neutralLight} className="m-1" theme={theme} />}
+                    {yearText !== null && <Chip label={yearText} size="small" textColor={theme.palette.black} bgColor={theme.palette.neutralLighter} className="m-1" theme={theme} />}
+                    {semesterText !== null && <Chip label={semesterText} size="small" textColor={theme.palette.black} bgColor={theme.palette.neutralLighter} theme={theme} />}
                 </Text>
 
                 <Text variant="small" style={{ marginTop: 8, marginBottom: 8 }}>

diff --git a/components/Home/DegreesMarquee.tsx b/components/Home/DegreesMarquee.tsx
@@ -4,6 +4,7 @@ import Marquee from "react-fast-marquee";
 import Chip from '../Atoms/Chip';
 
 interface Props {
+    isLoadingDegrees: boolean,
     degrees: string[]
 };
 
@@ -16,18 +17,34 @@ const DegreesMarquee = (props: Props) => {
     return (
         <div className="degrees-marquee d-flex flex-column" style={{ gap: 10 }}>
 
-            <Marquee direction={"right"} gradient={false} speed={10}>
+            <Marquee direction={"right"} gradient={false} speed={9}>
                 {firstHalf.map((x,i) =>
                     <Text styles={semibold} key={i}>
-                        <Chip label={x} size="small" textColor={theme.palette.white} bgColor={theme.palette.themeDarkAlt} className="mr-1" />
+                        <Chip 
+                            label={x} 
+                            size="small" 
+                            textColor={theme.palette.white} 
+                            bgColor={theme.palette.themeDarkAlt} 
+                            className="mr-1" 
+                            theme={theme}
+                            isLoading={props.isLoadingDegrees} 
+                        />
                     </Text>
                 )}
             </Marquee>
 
-            <Marquee direction={"left"} gradient={false} speed={10}>
+            <Marquee direction={"left"} gradient={false} speed={9}>
                 {secondHalf.map((x,i) =>
                     <Text styles={semibold} key={i+half}>
-                        <Chip label={x} size="small" textColor={theme.palette.white} bgColor={theme.palette.themeDarkAlt} className="mr-1" />
+                        <Chip 
+                            label={x} 
+                            size="small" 
+                            textColor={theme.palette.white} 
+                            bgColor={theme.palette.themeDarkAlt} 
+                            className="mr-1" 
+                            theme={theme}
+                            isLoading={props.isLoadingDegrees} 
+                        />
                     </Text>
                 )}
             </Marquee>

diff --git a/components/Home/Landing.tsx b/components/Home/Landing.tsx
@@ -9,12 +9,12 @@ import Row from 'react-bootstrap/Row';
 import Image from 'next/image';
 
 interface Props {
-    degrees: string[]
+    isLoadingDegrees: boolean,
+    degrees: Array<string>
 };
 
 const Landing = (props: Props) => {
     const locale = LocalizationService.strings();
-    let stringDegrees: string[] = props.degrees;
 
     return (
         <div className="pb-5 pt-5">
@@ -50,7 +50,10 @@ const Landing = (props: Props) => {
                             </h2>
                         </div>
 
-                        <DegreesMarquee degrees={stringDegrees} />
+                        <DegreesMarquee 
+                            isLoadingDegrees={props.isLoadingDegrees}
+                            degrees={props.degrees} 
+                        />
                     </Col>
                 </Row>
             </Container>

diff --git a/locale/en.ts b/locale/en.ts
@@ -86,7 +86,7 @@ const localeEn: ILocalizationStrings = {
         coachMark: { text1: 'Welcome on our website!', text2: 'Here you can find some settings that might be helpful. Enjoy our services! :)', understood: 'Got it!' }
     },
     homepage: {
-        telegramText: "Telegram is way safer and efficient than WhatsApp.",
+        telegramText: "WhatsApp is not suitable for a university community.",
         telegramButton: "Tell me more",
         section1: {
             typedText: 'Are you a student of...',

diff --git a/locale/it.ts b/locale/it.ts
@@ -86,7 +86,7 @@ const localeIt: ILocalizationStrings = {
         coachMark: { text1: 'Benvenuto sul nostro sito!', text2: 'Qui puoi trovare alcune impostazioni che ti potrebbero servire. Per il resto, esplora liberamente i servizi che offriamo! :)', understood: 'Capito!' }
     },
     homepage: {
-        telegramText: "Telegram è un'app di messaggistica molto più potente e sicura di WhatsApp.",
+        telegramText: "WhatsApp non è adatto per gli studenti e contenuti universitari.",
         telegramButton: "Dimmi di più",
         section1: {
             typedText: 'Sei iscritto a...',

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,5 +1,4 @@
 import { NextSeo } from 'next-seo';
-import { GetServerSideProps } from 'next/types';
 import { getStringDegrees } from 'services/Requests';
 import LocalizationService from "../services/LocalizationService";
 import Faqs from '../components/Home/Faqs';
@@ -11,15 +10,51 @@ import Section4 from '../components/Home/Section4';
 import Telegram from '../components/Home/Telegram';
 import Wikipedia from '../components/Home/Wikipedia';
 import UnimiaStudentiUnimi from '../components/Home/UnimiaStudentiUnimi';
+import { useCallback, useEffect, useState } from 'react';
 
-interface Props {
-    degrees: string[]
-};
-
-const HomeView = (props: Props) => {
+const Homepage = () => {
     const locale = LocalizationService.strings();
     var language: string | undefined = LocalizationService.getLanguage();
 
+    const [isLoadingDegrees, setIsLoadingDegrees] = useState<boolean>(false);
+    const [degrees, setDegrees] = useState<Array<string>>([]);
+
+    const getDegrees = useCallback(async () => {
+        setDegrees([
+            'informatica',
+            'fisica',
+            'informatica musicale',
+            'matematica',
+            'informatica per la comunicazione digitale',
+            'bioinformatics',
+            'sicurezza informatica',
+            "infermieristica",
+            "scienze delle professioni sanitarie tecniche diagnostiche",
+            "scienze chimiche",
+            "scienze della produzione e protezione delle piante",
+            "medical biotechnology and molecular medicine",
+            "international politics, law and economics",
+            "finance and economics (mef)",
+            "infermieristica pediatrica",
+            "scienza, tecnica e didattica dello sport",
+            "scienze internazionali e istituzioni europee (sie)",
+            "scienze dei servizi giuridici",
+            "international politics, law and economics"
+        ]);
+
+        setIsLoadingDegrees(true);
+
+        const stringDegreesResult = await getStringDegrees();
+
+        setDegrees(stringDegreesResult.value ?? []);
+
+        setIsLoadingDegrees(false);
+    }, [setDegrees]);
+
+    useEffect(() => {
+        getDegrees();
+    }, []);
+
     return (
         <>
             <NextSeo
@@ -48,7 +83,10 @@ const HomeView = (props: Props) => {
             />
 
             <section className="home">
-                <Landing degrees={props.degrees} />
+                <Landing 
+                    isLoadingDegrees={isLoadingDegrees}
+                    degrees={degrees} 
+                />
 
                 <Telegram />
 
@@ -70,42 +108,4 @@ const HomeView = (props: Props) => {
     )
 };
 
-export const getServerSideProps: GetServerSideProps = async () => {
-    let stringDegreesResult = await getStringDegrees();
-    let degrees: Array<string> = [];
-
-    // Fill string degrees with default ones in case of API error
-    if (stringDegreesResult.error) {
-        degrees = [
-            'informatica',
-            'fisica',
-            'informatica musicale',
-            'matematica',
-            'informatica per la comunicazione digitale',
-            'bioinformatics',
-            'sicurezza informatica',
-            "infermieristica",
-            "scienze delle professioni sanitarie tecniche diagnostiche",
-            "scienze chimiche",
-            "scienze della produzione e protezione delle piante",
-            "medical biotechnology and molecular medicine",
-            "international politics, law and economics",
-            "finance and economics (mef)",
-            "infermieristica pediatrica",
-            "scienza, tecnica e didattica dello sport",
-            "scienze internazionali e istituzioni europee (sie)",
-            "scienze dei servizi giuridici",
-            "international politics, law and economics"
-        ];
-    } else {
-        degrees = stringDegreesResult.value ?? [];
-    }
-
-    return { 
-        props: { 
-            degrees: degrees
-        } 
-    };
-};
-
-export default HomeView;
+export default Homepage;
diff --git a/styles/index.scss b/styles/index.scss
@@ -428,4 +428,38 @@ footer .ms-Label {
     gap: 0 !important;
     text-align: center;
   }
+}
+
+.chip-shimmer {
+  position: relative;
+  overflow: hidden;
+}
+
+.chip-shimmer::before {
+  content: "";
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background-image: linear-gradient(to right,
+      transparent 0%,
+      rgba(255, 255, 255, 0.2) 40%,
+      transparent 60%,
+      transparent 100%);
+  transform: rotate(45deg);
+}
+
+.chip-shimmer::after {
+  content: "";
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background-image: linear-gradient(to bottom,
+      transparent 0%,
+      rgba(255, 255, 255, 0.2) 40%,
+      transparent 60%,
+      transparent 100%);
 }