[apisix-website] branch master updated: fix: features component (#1178)

[bzp2010]

This is an automated email from the ASF dual-hosted git repository.

bzp2010 pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-website.git


The following commit(s) were added to refs/heads/master by this push:
     new b4b7ef05f88 fix: features component (#1178)
b4b7ef05f88 is described below

commit b4b7ef05f88689db2a0ebd2ac4069b0002b8cf9d
Author: Young <isk...@outlook.com>
AuthorDate: Mon Jul 4 10:44:17 2022 +0800

    fix: features component (#1178)
---
 website/src/components/sections/Features.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/website/src/components/sections/Features.tsx 
b/website/src/components/sections/Features.tsx
index e79552ec2d6..b4c76fe7c4b 100644
--- a/website/src/components/sections/Features.tsx
+++ b/website/src/components/sections/Features.tsx
@@ -2,11 +2,12 @@ import type { FC } from 'react';
 import React, { useEffect, useRef } from 'react';
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import { gsap } from 'gsap/gsap-core';
+import gsap from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 
 import Translate from '@docusaurus/Translate';
 import useWindowType from '@theme/hooks/useWindowSize';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 import ArrowAnim from '../ArrowAnim';
 
 const DashboardPlayground = () => (
@@ -34,8 +35,6 @@ const DashboardPlayground = () => (
 );
 
 const FeatDesktop: FC = () => {
-  gsap.registerPlugin(ScrollTrigger);
-
   const dashboardDiv = useRef(null);
   const userfDiv = useRef(null);
   const pluginDiv = useRef(null);
@@ -175,8 +174,6 @@ const FeatDesktop: FC = () => {
 };
 
 const FeatMobile: FC = () => {
-  gsap.registerPlugin(ScrollTrigger);
-
   const observers = [];
   const img1col = useRef(null);
   const img2col = useRef(null);
@@ -299,13 +296,16 @@ const FeatMobile: FC = () => {
 };
 
 const FeatContainer: FC = () => {
+  gsap.registerPlugin(ScrollTrigger);
   const windowType = useWindowType();
 
-  if (windowType === 'desktop') {
-    return <FeatDesktop />;
-  }
-
-  return <FeatMobile />;
+  return (
+    <BrowserOnly>
+      {() => (windowType === 'desktop'
+        ? <FeatDesktop />
+        : <FeatMobile />)}
+    </BrowserOnly>
+  );
 };
 
 const Features: FC = () => (