Commit 5593ace7 authored by Marek Veselý's avatar Marek Veselý
Browse files

Merge branch '197-revise-non-ideal-states' into 'main' 

improve spinners

Closes #375

See merge request inject/frontend!370
parents 555acf2a a144efc7

frontend/src/actionlog/ActionLog/index.tsx

+2 −2
Original line number Diff line number Diff line
@@ -130,8 +130,8 @@ const ActionLog: FC<ActionLogProps> = ({ 
      {actionLogs.length === 0 && !bottomOverride && (

        <NonIdealState

          icon='low-voltage-pole'

          title='No notifications'

          description='Please wait for new notifications to come in'

          title='No injects found'

          description='There are no injects in this channel yet'

          {...noDataProps}

        />

      )}

frontend/src/actionlog/InjectMessage/Content/InstructorQuestionnaireContent.tsx

+8 −3
Original line number Diff line number Diff line 
import ErrorMessage from '@/components/ErrorMessage'

import type { OptionProps } from '@blueprintjs/core'

import {

  Colors,
@@ -13,10 +12,16 @@ import type { Question } from '@inject/graphql/fragments/Question.generated' 
import type { QuestionnaireDetails } from '@inject/graphql/fragments/QuestionnaireDetails.generated'

import type { AnswerInput } from '@inject/graphql/types'

import useTeamQuestionnaireStateSubscription from '@inject/graphql/utils/useTeamQuestionnaireStateSubscription'

import ErrorMessage from '@inject/shared/components/ErrorMessage'

import type { FC } from 'react'

import { Fragment, useEffect, useState } from 'react'

import { INVALID_CHOICE, questionNumber } from './TraineeQuestionnaireContent'



const spinner = css`

  /* causes ever-changing overflows without the padding */

  padding: 1rem;

`



const wrapper = css`

  height: 100%;

  width: 100%;
@@ -65,8 +70,8 @@ const InstructorQuestionnaireContent: FC< 
      }))

    )

  }, [data, details.questions])

  if (loading && !data) {

    return <Spinner />

  if (loading) {

    return <Spinner className={spinner} />

  }

  if (error) {

    return (

frontend/src/actionlog/InjectMessage/Content/TraineeQuestionnaireContent.tsx

+7 −2
Original line number Diff line number Diff line 
import ErrorMessage from '@/components/ErrorMessage'

import type { ButtonProps, OptionProps } from '@blueprintjs/core'

import {

  Button,
@@ -16,11 +15,17 @@ import { useGetTeam } from '@inject/graphql/queries/GetTeam.generated' 
import { GetTeamQuestionnaireStateDocument } from '@inject/graphql/queries/GetTeamQuestionnaireState.generated'

import type { AnswerInput } from '@inject/graphql/types'

import useTeamQuestionnaireStateSubscription from '@inject/graphql/utils/useTeamQuestionnaireStateSubscription'

import ErrorMessage from '@inject/shared/components/ErrorMessage'

import { useNotifyContext } from '@inject/shared/notification/contexts/NotifyContext'

import notEmpty from '@inject/shared/utils/notEmpty'

import type { FC } from 'react'

import { Fragment, useEffect, useMemo, useState } from 'react'



const spinner = css`

  /* causes ever-changing overflows without the padding */

  padding: 1rem;

`



const wrapper = css`

  display: flex;

  flex-direction: column;
@@ -139,7 +144,7 @@ const TraineeQuestionnaireContent: FC<TraineeQuestionnaireContentProps> = ({ 
  }, [answers, status])



  if (loading || teamLoading) {

    return <Spinner />

    return <Spinner className={spinner} />

  }

  if (error) {

    return (

frontend/src/analyst/ExerciseSelector/index.tsx

+1 −1
Original line number Diff line number Diff line
@@ -48,7 +48,7 @@ const ExerciseSelector: FC<ExerciseSelectorProps> = ({ 
        {...buttonProps}

      />

      <Overlay2 isOpen={isOpen} onClose={() => setIsOpen(false)}>

        <Section title='Exercise selector'>

        <Section title='Select an exercise'>

          <SectionCard>

            <ExerciseListWrapper

              className={className}

frontend/src/analyst/HealthCheck/index.tsx

+2 −2
Original line number Diff line number Diff line 
import type { SpinnerProps } from '@blueprintjs/core'

import { Spinner } from '@blueprintjs/core'

import { Spinner, SpinnerSize } from '@blueprintjs/core'

import { useApolloNetworkStatus } from '@inject/graphql/client'

import useApolloClient from '@inject/graphql/client/useApolloClient'

import { GetExerciseDocument } from '@inject/graphql/queries/GetExercise.generated'
@@ -75,7 +75,7 @@ const HealthCheck = () => { 


  return (

    <Spinner

      size={20}

      size={SpinnerSize.SMALL}

      value={spinnerProps.value}

      intent={spinnerProps.intent}

      title={`backend status: ${spinnerProps.title}`}