Merge pull request #22 from firecamp-io/fc-scrollbar

Loading animation added
HexmosTech · Oct 7, 2022 · 72fe2cd · 72fe2cd
2 parents c62d4e8 + f030b3b
commit 72fe2cd
Show file tree

Hide file tree

Showing 11 changed files with 105 additions and 42 deletions.
diff --git a/packages/firecamp-core/src/components/sidebar/EnvSidebar.tsx b/packages/firecamp-core/src/components/sidebar/EnvSidebar.tsx
@@ -13,12 +13,13 @@ import { EEnvironmentScope, IEnvironment } from '@firecamp/types';
 
 import EnvironmentDD from '../common/environment/environment-widget/EnvironmentDD';
 import * as platformContext from '../../services/platform-context';
+import classnames from 'classnames';
 
 import { useEnvStore, IEnvironmentStore } from '../../store/environment';
 import { useTabStore } from '../../store/tab';
 import AppService from '../../services/app'
 
-const EnvSidebar: FC<any> = () => {
+const EnvSidebar: FC<any> = ({ expanded }) => {
   const {
     activeTabWrsEnv,
     activeTabCollectionEnvs,
@@ -67,7 +68,7 @@ const EnvSidebar: FC<any> = () => {
       left={true}
       minWidth={'250'}
       maxWidth={'600'}
-      className="!absolute border-l border-appBorder bg-activityBarBackground top-0 right-0 bottom-0 z-30"
+      className={classnames("!absolute border-l border-appBorder bg-activityBarBackground top-0 right-0 bottom-0 z-30 expandable-right-pane", {'expanded': expanded})}
     >
       <Container>
         <Container.Header className="flex !p-2 bg-focus1">
@@ -120,7 +121,7 @@ const EnvSidebarContainer = ()=> {
     shallow
   );
   if(!isEnvSidebarOpen) return <></>;
-  return <EnvSidebar/>
+  return <EnvSidebar expanded={isEnvSidebarOpen}/>
 }
 export { EnvSidebar, EnvSidebarContainer };
 

diff --git a/packages/firecamp-core/src/components/tabs/TabBody.tsx b/packages/firecamp-core/src/components/tabs/TabBody.tsx
@@ -3,6 +3,7 @@ import { ERequestTypes } from '@firecamp/types';
 import { _object } from '@firecamp/utils';
 import { ErrorBoundary } from 'react-error-boundary';
 import _cloneDeep from 'lodash/cloneDeep';
+import {Loader} from '@firecamp/ui-kit';
 
 // import { Rest } from '@firecamp/rest';
 // import { GraphQL } from '@firecamp/graphql';
@@ -75,14 +76,14 @@ const TabBody = ({ tabObj, index, tabFns, activeTab }) => {
     switch (type) {
       case ERequestTypes.Rest:
         return (
-          <Suspense fallback={<div>Loading... </div>}>
+          <Suspense fallback={<Loader />}>
             <Rest {...tabProps} />
           </Suspense>
         );
         break;
       case ERequestTypes.GraphQL:
         return (
-          <Suspense fallback={<div>Loading... </div>}>
+          <Suspense fallback={<Loader />}>
             <GraphQL {...tabProps} />
           </Suspense>
         );

diff --git a/packages/firecamp-core/src/containers/App.tsx b/packages/firecamp-core/src/containers/App.tsx
@@ -83,7 +83,6 @@ const App: FC<any> = () => {
 
           <RealtimeEventManager />
           <ModalContainer />
-          {/* {isEnvSidebarOpen && <EnvSidebar />} */}
           <EnvSidebarContainer />
           <StatusBarContainer className="border-t focus-outer2" />
         </RootContainer>

diff --git a/packages/firecamp-graphql/src/components/GraphQL.tsx b/packages/firecamp-graphql/src/components/GraphQL.tsx
@@ -11,7 +11,7 @@ import {
 import shallow from 'zustand/shallow';
 import _cleanDeep from 'clean-deep';
 
-import { Container, Row, Column } from '@firecamp/ui-kit';
+import { Container, Row, Column,Loader } from '@firecamp/ui-kit';
 
 import _cloneDeep from 'lodash/cloneDeep';
 import SidebarPanel from './sidebar-panel/SidebarPanel';
@@ -34,9 +34,7 @@ import {
 
 import { normalizeRequest, prepareUiState } from '../services/graphql-service';
 import { ESidebarTabs } from '../types';
-import { collection } from '@firecamp/cloud-apis/dist/rest';
 
-const Loading = ({ ...props }) => <span>loading...</span>;
 
 const GraphQL = ({ tab, platformContext, activeTab, platformComponents }) => {
   let graphqlStoreApi: any = useGraphQLStoreApi();
@@ -306,6 +304,7 @@ const GraphQL = ({ tab, platformContext, activeTab, platformComponents }) => {
     });
   };
 
+  if(isFetchingRequest === true) return <Loader />;
   return (
     <Container className="h-full w-full with-divider" overflow="visible">
       <Container.Header>
@@ -317,24 +316,13 @@ const GraphQL = ({ tab, platformContext, activeTab, platformComponents }) => {
         />
       </Container.Header>
       <Container.Body>
-        {isFetchingRequest === true ? (
-          <Loading />
-        ) : (
-          <Row flex={1} overflow="auto" className="with-divider h-full">
-            <SidebarPanel />
-            <Column>
-              {/* <Container>
-              <Container.Body className="flex"> */}
-              <PlaygroundPanel />
-              {/* </Container.Body>
-            </Container> */}
-            </Column>
-            <DocWrapper />
-          </Row>
-        )}
-        {/* <Row className='border-botom'>
-          <HeadersTab />
-        </Row> */}
+        <Row flex={1} overflow="auto" className="with-divider h-full">
+          <SidebarPanel />
+          <Column>
+            <PlaygroundPanel />
+          </Column>
+          <DocWrapper />
+        </Row>
       </Container.Body>
       {tab.meta.isSaved && (
         <TabChangesDetector

diff --git a/packages/firecamp-rest/src/components/Rest.tsx b/packages/firecamp-rest/src/components/Rest.tsx
@@ -2,15 +2,14 @@ import { memo, useEffect } from 'react';
 
 import { nanoid as id } from 'nanoid';
 import _url from '@firecamp/url';
-import { Container, Row } from '@firecamp/ui-kit';
+import { Container, Row, Loader } from '@firecamp/ui-kit';
 import equal from 'deep-equal';
 import _cloneDeep from 'lodash/cloneDeep';
 import _cleanDeep from 'clean-deep';
 import { CurlToFirecamp } from '@firecamp/curl-to-firecamp';
 import {
   EAuthTypes,
   ERestBodyTypes,
-  EFirecampAgent,
   EHttpMethod,
   EPushActionType,
   ERequestTypes,
@@ -19,7 +18,6 @@ import {
 
 import shallow from 'zustand/shallow';
 
-import { Auth } from '../services';
 import UrlBarContainer from './common/urlbar/UrlBarContainer';
 import Request from './request/Request';
 import Response from './response/Response';
@@ -47,7 +45,6 @@ import {
   prepareUIRequestPanelState,
 } from '../services/rest-service';
 
-const Loading = ({ ...props }) => <span>loading...</span>;
 
 const Rest = ({ tab, platformContext, activeTab, platformComponents }) => {
   let restStoreApi: any = useRestStoreApi();
@@ -435,6 +432,8 @@ const Rest = ({ tab, platformContext, activeTab, platformComponents }) => {
     }
   };
 
+  if(isFetchingRequest === true) return <Loader />;
+
   return (
     <RestContext.Provider
       value={{
@@ -456,17 +455,13 @@ const Rest = ({ tab, platformContext, activeTab, platformComponents }) => {
           />
         </Container.Header>
         <Container.Body>
-          {isFetchingRequest === true ? (
-            <Loading />
-          ) : (
-            <Row flex={1} className="with-divider h-full" overflow="auto">
-              <Request
-                tab={tab}
-                getFirecampAgent={platformContext.getFirecampAgent}
-              />
-              <Response />
-            </Row>
-          )}
+          <Row flex={1} className="with-divider h-full" overflow="auto">
+            <Request
+              tab={tab}
+              getFirecampAgent={platformContext.getFirecampAgent}
+            />
+            <Response />
+          </Row>
           <CodeSnippets
             tabId={tab.id}
             getPlatformEnvironments={

diff --git a/packages/ui-kit/src/components/loader/Loader.scss b/packages/ui-kit/src/components/loader/Loader.scss
@@ -0,0 +1,21 @@
+.loader{
+    margin-top: calc(50vh - 80px);
+    margin-left: calc(50% - 80px);
+  }
+
+  .wave-loader {
+    animation: wave-loader 2s linear infinite;
+  }
+
+  @keyframes wave-loader {
+    0% {
+      width: 0px;
+    }
+    50% {
+      width: 14px;
+    }
+    100% {
+      width: 0px;
+    }
+  }
+
diff --git a/packages/ui-kit/src/components/loader/Loader.tsx b/packages/ui-kit/src/components/loader/Loader.tsx
@@ -0,0 +1,14 @@
+//@ts-nocheck
+import React, { FC } from "react";
+import './Loader.scss';
+
+
+const Loader: FC<any> = React.forwardRef((ref) => {
+
+    return (
+        <div className="flex w-16 items-center text-appForegroundInActive loader">Loading<span className="wave-loader overflow-hidden">...</span></div>
+    );
+
+})
+
+export default Loader;
diff --git a/packages/ui-kit/src/components/pane/Pane.scss b/packages/ui-kit/src/components/pane/Pane.scss
@@ -16,6 +16,7 @@
 }
 .pane.expanded:not(.custom-height){
     height: 100% !important;
+    flex: 1;
 }
 .pane>.pane-body{
     min-height: 160px;

diff --git a/packages/ui-kit/src/scss/base.scss b/packages/ui-kit/src/scss/base.scss
@@ -789,3 +789,13 @@ body .ace_editor .ace_scrollbar{
 }
 
 /*---code mirror css ends----------*/
+
+.expandable-right-pane{
+  transform: scaleX(0);
+  transform-origin: right;
+  transition: transform 2s;
+}
+
+.expandable-right-pane.expanded{
+  transform: scaleX(1); 
+}
diff --git a/packages/ui-kit/src/scss/tailwind.scss b/packages/ui-kit/src/scss/tailwind.scss
@@ -2838,3 +2838,34 @@ body .ace_editor .ace_scrollbar{
 }
 
 /*---code mirror css ends----------*/
+
+.loader{
+  margin-top: calc(50vh - 44px);
+  margin-left: calc(50vw - 80px);
+}
+
+.wave-loader {
+  animation: wave-loader 2s linear infinite;
+}
+
+@keyframes wave-loader {
+  0% {
+    width: 0px;
+  }
+  50% {
+    width: 14px;
+  }
+  100% {
+    width: 0px;
+  }
+}
+
+.expandable-right-pane{
+  transform: scaleX(0);
+  transform-origin: right;
+  transition: transform 2s;
+}
+
+.expandable-right-pane.expanded{
+  transform: scaleX(1); 
+}
diff --git a/packages/ui-kit/src/ui-kit.ts b/packages/ui-kit/src/ui-kit.ts
@@ -113,3 +113,5 @@ export { default as ToolBar } from './components/ToolBar/ToolBar';
 export { default as Alert } from './components/alert/Alert';
 export type { EAlertType } from './components/alert/Alert.interface';
 export { default as Empty } from './components/empty/Empty';
+
+export {default as Loader} from './components/loader/Loader';