Test Suspense

Signed-off-by: Cintia Sanchez Garcia <[email protected]>
cncf · Sep 4, 2023 · bb88613 · bb88613
1 parent bba63b9
commit bb88613
Showing 1 changed file with 34 additions and 27 deletions.
diff --git a/web/src/layout/explore/index.tsx b/web/src/layout/explore/index.tsx
@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { isUndefined, throttle } from 'lodash';
-import { Fragment, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { Fragment, Suspense, useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 
 import { GROUP_PARAM, VIEW_MODE_PARAM } from '../../data';
@@ -329,34 +329,41 @@ const Landscape = (props: Props) => {
             [styles.loadingContent]: loadingData,
           })}
         >
-          {visibleLoading && <Loading spinnerClassName={'position-fixed top-50 start-50'} />}
-
-          {props.data.groups ? (
+          <Suspense fallback={<Loading spinnerClassName={'position-fixed top-50 start-50'} />}>
             <>
-              {props.data.groups.map((group: Group) => {
-                const isSelected = selectedGroup === group.name;
-                return (
-                  <div key={group.name} className={classNames({ 'd-none': !isSelected }, { 'd-block': isSelected })}>
-                    <Content
-                      isSelected={isSelected}
-                      containerWidth={containerWidth}
-                      data={groupsData[group.name]}
-                      categories_overridden={props.data.categories_overridden}
-                      finishLoading={finishLoading}
-                    />
-                  </div>
-                );
-              })}
+              {/* {visibleLoading && <Loading spinnerClassName={'position-fixed top-50 start-50'} />} */}
+
+              {props.data.groups ? (
+                <>
+                  {props.data.groups.map((group: Group) => {
+                    const isSelected = selectedGroup === group.name;
+                    return (
+                      <div
+                        key={group.name}
+                        className={classNames({ 'd-none': !isSelected }, { 'd-block': isSelected })}
+                      >
+                        <Content
+                          isSelected={isSelected}
+                          containerWidth={containerWidth}
+                          data={groupsData[group.name]}
+                          categories_overridden={props.data.categories_overridden}
+                          finishLoading={finishLoading}
+                        />
+                      </div>
+                    );
+                  })}
+                </>
+              ) : (
+                <Content
+                  isSelected
+                  containerWidth={containerWidth}
+                  data={groupsData.default}
+                  categories_overridden={props.data.categories_overridden}
+                  finishLoading={finishLoading}
+                />
+              )}
             </>
-          ) : (
-            <Content
-              isSelected
-              containerWidth={containerWidth}
-              data={groupsData.default}
-              categories_overridden={props.data.categories_overridden}
-              finishLoading={finishLoading}
-            />
-          )}
+          </Suspense>
         </div>
       </div>