refactor: remove loading steps text (bigbluebutton#21709)

* remove loading steps text * remove loading screen children
antonbsa · Nov 21, 2024 · 46fda48 · 46fda48
1 parent c70e978
commit 46fda48
Show file tree

Hide file tree

Showing 11 changed files with 27 additions and 53 deletions.
diff --git a/bigbluebutton-html5/client/meetingClient.jsx b/bigbluebutton-html5/client/meetingClient.jsx
@@ -38,7 +38,7 @@ import PLUGIN_CONFIGURATION_QUERY from '/imports/ui/components/plugins-engine/qu
 const Startup = () => {
   const loadingContextInfo = useContext(LoadingContext);
   useEffect(() => {
-    loadingContextInfo.setLoading(false, '');
+    loadingContextInfo.setLoading(false);
   }, []);
   // Logs all uncaught exceptions to the client logger
   window.addEventListener('error', (e) => {

diff --git a/bigbluebutton-html5/imports/startup/client/intlLoader.tsx b/bigbluebutton-html5/imports/startup/client/intlLoader.tsx
@@ -126,7 +126,7 @@ const IntlLoader: React.FC<IntlLoaderProps> = ({
             const foundLocales = typedResp.filter((locale) => locale instanceof Object) as LocaleJson[];
             if (foundLocales.length === 0) {
               const error = `${{ logCode: 'intl_fetch_locale_error' }},Could not fetch any locale file for ${languageSets.join(', ')}`;
-              loadingContextInfo.setLoading(false, '');
+              loadingContextInfo.setLoading(false);
               logger.error(error);
               throw new Error(error);
             }
@@ -137,15 +137,15 @@ const IntlLoader: React.FC<IntlLoaderProps> = ({
             setCurrentLocale(replacedLocale);
             setMessages(mergedLocale);
             if (!init) {
-              loadingContextInfo.setLoading(false, '');
+              loadingContextInfo.setLoading(false);
             }
           }).catch((error) => {
-            loadingContextInfo.setLoading(false, '');
+            loadingContextInfo.setLoading(false);
             throw new Error(error);
           });
       })
       .catch(() => {
-        loadingContextInfo.setLoading(false, '');
+        loadingContextInfo.setLoading(false);
         throw new Error('unable to fetch localized messages');
       });
   }, []);

diff --git a/bigbluebutton-html5/imports/ui/components/common/loading-screen/component.jsx b/bigbluebutton-html5/imports/ui/components/common/loading-screen/component.jsx
@@ -1,16 +1,13 @@
 import React from 'react';
 import Styled from './styles';
 
-const LoadingScreen = ({ children }) => (
+const LoadingScreen = () => (
   <Styled.Background>
     <Styled.Spinner animations>
       <Styled.Bounce1 animations />
       <Styled.Bounce2 animations />
       <div />
     </Styled.Spinner>
-    <Styled.Message>
-      {children}
-    </Styled.Message>
   </Styled.Background>
 );
 

diff --git a/...button-html5/imports/ui/components/common/loading-screen/loading-screen-HOC/component.tsx b/...button-html5/imports/ui/components/common/loading-screen/loading-screen-HOC/component.tsx
@@ -3,16 +3,14 @@ import LoadingScreen from '../component';
 
 interface LoadingContent {
   isLoading: boolean;
-  loadingMessage: string;
 }
 
 interface LoadingContextContent extends LoadingContent {
-  setLoading: (isLoading: boolean, loadingMessage: string) => void;
+  setLoading: (isLoading: boolean) => void;
 }
 
 export const LoadingContext = React.createContext<LoadingContextContent>({
   isLoading: false,
-  loadingMessage: '',
   setLoading: () => { },
 });
 
@@ -25,27 +23,22 @@ const LoadingScreenHOC: React.FC<LoadingScreenHOCProps> = ({
 }) => {
   const [loading, setLoading] = React.useState<LoadingContent>({
     isLoading: false,
-    loadingMessage: '',
   });
 
   return (
     <LoadingContext.Provider value={{
-      loadingMessage: loading.loadingMessage,
       isLoading: loading.isLoading,
-      setLoading: (isLoading: boolean, loadingMessage: string = '') => {
+      setLoading: (isLoading: boolean) => {
         setLoading({
           isLoading,
-          loadingMessage,
         });
       },
     }}
     >
       {
         loading.isLoading
           ? (
-            <LoadingScreen>
-              <h1>{loading.loadingMessage}</h1>
-            </LoadingScreen>
+            <LoadingScreen />
           )
           : null
       }

diff --git a/bigbluebutton-html5/imports/ui/components/common/loading-screen/styles.js b/bigbluebutton-html5/imports/ui/components/common/loading-screen/styles.js
@@ -1,7 +1,6 @@
 import styled, { css, keyframes } from 'styled-components';
 import { mdPaddingX } from '/imports/ui/stylesheets/styled-components/general';
-import { loaderBg, loaderBullet, colorWhite } from '/imports/ui/stylesheets/styled-components/palette';
-import { fontSizeLarge } from '/imports/ui/stylesheets/styled-components/typography';
+import { loaderBg, loaderBullet } from '/imports/ui/stylesheets/styled-components/palette';
 
 const Background = styled.div`
   position: fixed;
@@ -57,16 +56,9 @@ const Bounce2 = styled.div`
   `}
 `;
 
-const Message = styled.div`
-  font-size: ${fontSizeLarge};
-  color: ${colorWhite};
-  text-align: center;
-`;
-
 export default {
   Background,
   Spinner,
   Bounce1,
   Bounce2,
-  Message,
 };
diff --git a/bigbluebutton-html5/imports/ui/components/connection-manager/component.tsx b/bigbluebutton-html5/imports/ui/components/connection-manager/component.tsx
@@ -97,11 +97,11 @@ const ConnectionManager: React.FC<ConnectionManagerProps> = ({ children }): Reac
     BBBWeb.index().then(({ data }) => {
       setGraphqlUrl(data.graphqlWebsocketUrl);
     }).catch((error) => {
-      loadingContextInfo.setLoading(false, '');
+      loadingContextInfo.setLoading(false);
       throw new Error('Error fetching GraphQL URL: '.concat(error.message || ''));
     });
     logger.info('Fetching GraphQL URL');
-    loadingContextInfo.setLoading(true, '1/2');
+    loadingContextInfo.setLoading(true);
   }, []);
 
   useEffect(() => {
@@ -155,12 +155,12 @@ const ConnectionManager: React.FC<ConnectionManagerProps> = ({ children }): Reac
 
   useEffect(() => {
     logger.info('Connecting to GraphQL server');
-    loadingContextInfo.setLoading(true, '2/2');
+    loadingContextInfo.setLoading(true);
     if (graphqlUrl) {
       const urlParams = new URLSearchParams(window.location.search);
       const sessionToken = urlParams.get('sessionToken');
       if (!sessionToken) {
-        loadingContextInfo.setLoading(false, '');
+        loadingContextInfo.setLoading(false);
         throw new Error('Missing session token');
       }
       sessionStorage.setItem('sessionToken', sessionToken);
@@ -215,7 +215,7 @@ const ConnectionManager: React.FC<ConnectionManagerProps> = ({ children }): Reac
             }
 
             if (error && typeof error === 'object' && 'code' in error && error.code === 4403) {
-              loadingContextInfo.setLoading(false, '');
+              loadingContextInfo.setLoading(false);
               setTerminalError('Server refused the connection');
               return false;
             }
@@ -233,7 +233,7 @@ const ConnectionManager: React.FC<ConnectionManagerProps> = ({ children }): Reac
           on: {
             error: (error) => {
               logger.error('Graphql Client Error:', error);
-              loadingContextInfo.setLoading(false, '');
+              loadingContextInfo.setLoading(false);
               connectionStatus.setConnectedStatus(false);
               setErrorCounts((prev: number) => prev + 1);
             },
@@ -259,7 +259,7 @@ const ConnectionManager: React.FC<ConnectionManagerProps> = ({ children }): Reac
                 // message ID -1 as a signal to terminate the session
                 // it contains a prop message.messageId which can be used to show a proper error to the user
                 logger.error({ logCode: 'graphql_server_closed_connection', extraInfo: message }, 'Graphql Server closed the connection');
-                loadingContextInfo.setLoading(false, '');
+                loadingContextInfo.setLoading(false);
                 const payload = message.payload as ErrorPayload[];
                 if (payload[0].messageId) {
                   setTerminalError(new Error(payload[0].message, { cause: payload[0].messageId }));
@@ -277,12 +277,12 @@ const ConnectionManager: React.FC<ConnectionManagerProps> = ({ children }): Reac
         );
         wsLink = ApolloLink.from([payloadSizeCheckLink, errorLink, graphWsLink]);
         wsLink.setOnError((error) => {
-          loadingContextInfo.setLoading(false, '');
+          loadingContextInfo.setLoading(false);
           throw new Error('Error: on apollo connection'.concat(JSON.stringify(error) || ''));
         });
         apolloContextHolder.setLink(subscription);
       } catch (error) {
-        loadingContextInfo.setLoading(false, '');
+        loadingContextInfo.setLoading(false);
         throw new Error('Error creating WebSocketLink: '.concat(JSON.stringify(error) || ''));
       }
       let client;
@@ -295,7 +295,7 @@ const ConnectionManager: React.FC<ConnectionManagerProps> = ({ children }): Reac
         setApolloClient(client);
         apolloContextHolder.setClient(client);
       } catch (error) {
-        loadingContextInfo.setLoading(false, '');
+        loadingContextInfo.setLoading(false);
         throw new Error('Error creating Apollo Client: '.concat(JSON.stringify(error) || ''));
       }
     }

diff --git a/bigbluebutton-html5/imports/ui/components/join-handler/custom-users-settings/component.tsx b/bigbluebutton-html5/imports/ui/components/join-handler/custom-users-settings/component.tsx
@@ -100,11 +100,7 @@ const CustomUsersSettings: React.FC<CustomUsersSettingsProps> = ({
         />
       ) : null}
       {loading ? (
-        <LoadingScreen>
-          <div className="sr-only">
-            Loading...
-          </div>
-        </LoadingScreen>
+        <LoadingScreen />
       ) : null}
     </>
   );

diff --git a/bigbluebutton-html5/imports/ui/components/join-handler/guest-wait/component.tsx b/bigbluebutton-html5/imports/ui/components/join-handler/guest-wait/component.tsx
@@ -125,7 +125,7 @@ const GuestWait: React.FC<GuestWaitProps> = (props) => {
     const sessionToken = getSearchParam('sessionToken');
 
     if (loadingContextInfo.isLoading) {
-      loadingContextInfo.setLoading(false, '');
+      loadingContextInfo.setLoading(false);
     }
 
     if (!sessionToken) {

diff --git a/bigbluebutton-html5/imports/ui/components/join-handler/presenceManager/component.tsx b/bigbluebutton-html5/imports/ui/components/join-handler/presenceManager/component.tsx
@@ -121,7 +121,7 @@ const PresenceManager: React.FC<PresenceManagerProps> = ({
   useEffect(() => {
     if (isGuestAllowed) {
       timeoutRef.current = setTimeout(() => {
-        loadingContextInfo.setLoading(false, '');
+        loadingContextInfo.setLoading(false);
         throw new Error('Authentication timeout');
       }, connectionTimeout);
     }
@@ -155,7 +155,7 @@ const PresenceManager: React.FC<PresenceManagerProps> = ({
 
   useEffect(() => {
     if (joinErrorCode) {
-      loadingContextInfo.setLoading(false, '');
+      loadingContextInfo.setLoading(false);
     }
   },
   [joinErrorCode, joinErrorMessage]);
@@ -204,7 +204,7 @@ const PresenceManagerContainer: React.FC<PresenceManagerContainerProps> = ({ chi
   const loadingContextInfo = useContext(LoadingContext);
   if (loading || userInfoLoading) return null;
   if (error || userInfoError) {
-    loadingContextInfo.setLoading(false, '');
+    loadingContextInfo.setLoading(false);
     logger.debug(`Error on user authentication: ${error}`);
   }
 

diff --git a/bigbluebutton-html5/imports/ui/components/meeting-ended/component.tsx b/bigbluebutton-html5/imports/ui/components/meeting-ended/component.tsx
@@ -380,7 +380,7 @@ const MeetingEnded: React.FC<MeetingEndedProps> = ({
 
   useEffect(() => {
     // Sets Loading to falsed and removes loading splash screen
-    loadingContextInfo.setLoading(false, '');
+    loadingContextInfo.setLoading(false);
     // Stops all media tracks
     window.dispatchEvent(new Event('StopAudioTracks'));
     // get the media tag from the session storage

diff --git a/bigbluebutton-html5/imports/ui/components/settings-loader/component.tsx b/bigbluebutton-html5/imports/ui/components/settings-loader/component.tsx
@@ -93,11 +93,7 @@ const SettingsLoader: React.FC<SettingsLoaderProps> = (props) => {
         />
       ) : null}
       {loading ? (
-        <LoadingScreen>
-          <div style={{ display: 'none' }}>
-            Loading...
-          </div>
-        </LoadingScreen>
+        <LoadingScreen />
       ) : null}
     </>
   );