add loader when loading repos to oss page

apps/www/components/OpenSource/Repos.tsx

@@ -2,7 +2,9 @@ import React, { useState, useEffect } from 'react'
 import Link from 'next/link'
 import { AnimatePresence } from 'framer-motion'
 import { Swiper, SwiperSlide } from 'swiper/react'
+import { Octokit } from 'octokit'
 import { cn } from 'ui'
+import LogoLoader from 'ui/src/components/LogoLoader'
 
 import RepoCard from './RepoCard'
 
@@ -54,7 +56,6 @@ export interface RepoTab {
 
 interface Props {
   tabs: RepoTab[]
-  repos: any[]
 }
 
 enum SWIPER_STATE {
@@ -63,11 +64,27 @@ enum SWIPER_STATE {
   END = 'END',
 }
 
-const Repos = ({ tabs, repos }: Props) => {
+const Repos = ({ tabs }: Props) => {
+  const octokit = new Octokit()
+  const [repos, setRepos] = useState<any[] | null>(null)
   const [activeTab, setActiveTab] = useState(0)
   const [apiSwiper, setApiSwiper] = useState(undefined)
   const [swiperState, setSwiperState] = useState<SWIPER_STATE>(SWIPER_STATE.START)
 
+  useEffect(() => {
+    async function fetchOctoData() {
+      const res = await octokit.request('GET /orgs/{org}/repos', {
+        org: 'supabase',
+        type: 'public',
+        per_page: 200,
+        page: 1,
+      })
+
+      setRepos(res.data)
+    }
+    fetchOctoData()
+  }, [])
+
   useEffect(() => {
     if (!apiSwiper) return
     // @ts-ignore
@@ -79,8 +96,10 @@ const Repos = ({ tabs, repos }: Props) => {
   }
 
   const activeTabRepos = repos
-    .filter((repo) => tabs[activeTab].repos?.includes(repo.name))
-    ?.sort((a, b) => (a.stargazers_count < b.stargazers_count ? 1 : -1))
+    ? repos
+        ?.filter((repo) => tabs[activeTab].repos?.includes(repo.name))
+        ?.sort((a, b) => (a.stargazers_count < b.stargazers_count ? 1 : -1))
+    : []
 
   return (
     <div className="flex flex-col gap-8 xl:gap-10">
@@ -157,14 +176,20 @@ const Repos = ({ tabs, repos }: Props) => {
       </div>
       <div className="relative w-full h-fit grid md:grid-cols-2 lg:grid-cols-3 gap-4">
         <AnimatePresence exitBeforeEnter>
-          {activeTabRepos?.map((repo: any, i: number) => (
-            <RepoCard
-              key={`${activeTab}-${repo.name}`}
-              repo={repo}
-              activeTab={activeTab}
-              index={i}
-            />
-          ))}
+          {repos === null ? (
+            <div className="col-span-full flex justify-center items-center min-h-[300px]">
+              <LogoLoader />
+            </div>
+          ) : (
+            activeTabRepos?.map((repo: any, i: number) => (
+              <RepoCard
+                key={`${activeTab}-${repo.name}`}
+                repo={repo}
+                activeTab={activeTab}
+                index={i}
+              />
+            ))
+          )}
         </AnimatePresence>
       </div>
     </div>

apps/www/pages/open-source/index.tsx

@@ -1,10 +1,9 @@
-import { useState, useEffect } from 'react'
 import { useRouter } from 'next/router'
-import { Octokit } from '@octokit/core'
 import { NextSeo } from 'next-seo'
 
 import DefaultLayout from '~/components/Layouts/Default'
 import SectionContainer from '~/components/Layouts/SectionContainer'
+import CTABanner from '~/components/CTABanner'
 import OSSHero from '~/components/OpenSource/OSSHero'
 import ProductHeaderCentered from '~/components/Sections/ProductHeaderCentered'
 import Repos from '~/components/OpenSource/Repos'
@@ -14,26 +13,8 @@ import pageData from '~/data/open-source'
 
 // Import Swiper styles if swiper used on page
 import 'swiper/swiper.min.css'
-import CTABanner from '../../components/CTABanner'
 
 const OpenSource = () => {
-  const octokit = new Octokit()
-  const [repos, setRepos] = useState([{}])
-
-  useEffect(() => {
-    async function fetchOctoData() {
-      const res = await octokit.request('GET /orgs/{org}/repos', {
-        org: 'supabase',
-        type: 'public',
-        per_page: 200,
-        page: 1,
-      })
-
-      setRepos(res.data)
-    }
-    fetchOctoData()
-  }, [])
-
   const router = useRouter()
 
   const meta_title = pageData.metaTitle || 'Open Source | Supabase'
@@ -63,7 +44,7 @@ const OpenSource = () => {
         </SectionContainer>
         <OSSHero />
         <SectionContainer className="!pt-0">
-          <Repos repos={repos} tabs={pageData.repo_tabs} />
+          <Repos tabs={pageData.repo_tabs} />
         </SectionContainer>
         <SectionContainer className="!py-0">
           <div className="w-full bg-scale-400 border-b" />

packages/ui/index.tsx

@@ -46,6 +46,7 @@ export * from './src/components/ExpandableVideo'
 
 export * from './src/components/Space'
 export * from './src/components/Loading'
+export * from './src/components/LogoLoader'
 export * from './src/components/Divider'
 
 // DATA ENTRY

packages/ui/src/components/LogoLoader/LogoLoader.anim.json

@@ -0,0 +1 @@
+{"v":"5.7.3","fr":30,"ip":0,"op":45,"w":150,"h":150,"nm":"Loading-brand-green 2","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Livello forma 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[75,75,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[70,70,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[8.191,0],[0,0],[0,0],[2.859,-3.601],[0,0],[-8.191,0],[0,0],[0,0],[-2.859,3.601],[0,0]],"o":[[0,0],[0,0],[-0.069,-4.598],[0,0],[-5.093,6.415],[0,0],[0,0],[0.069,4.598],[0,0],[5.093,-6.415]],"v":[[44.681,-16.115],[-0.239,-16.115],[-0.469,-51.136],[-9.195,-54.106],[-52.347,0.24],[-44.681,16.115],[-0.055,16.115],[0.469,51.137],[9.195,54.107],[52.347,-0.24]],"c":true},"ix":2},"nm":"Tracciato 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.243137255311,0.811764717102,0.556862771511,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":5,"ix":5},"lc":1,"lj":2,"bm":0,"nm":"Traccia 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Trasformazione"}],"nm":"Forma 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.423],"y":[1]},"o":{"x":[0.501],"y":[0]},"t":9,"s":[100]},{"t":44,"s":[2]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.571],"y":[-0.005]},"t":0,"s":[98]},{"t":22,"s":[0]}],"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.676],"y":[1]},"o":{"x":[0.376],"y":[0]},"t":0,"s":[105]},{"t":44,"s":[-260]}],"ix":3},"m":1,"ix":2,"nm":"Taglia tracciati 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":45,"st":0,"bm":0}],"markers":[]}

packages/ui/src/components/LogoLoader/LogoLoader.tsx

@@ -0,0 +1,12 @@
+import Lottie from 'lottie-react'
+import loadingAnim from './LogoLoader.anim.json'
+
+const LogoLoader = () => (
+  <div className="w-full h-full flex flex-col items-center justify-center">
+    <div className="w-28">
+      <Lottie loop={true} autoplay={true} animationData={loadingAnim} />
+    </div>
+  </div>
+)
+
+export default LogoLoader

packages/ui/src/components/LogoLoader/index.ts

@@ -0,0 +1,3 @@
+import LogoLoader from './LogoLoader'
+
+export default LogoLoader