Overview

#

A composable that offers the show reactive function. This function guarantees that something will be displayed at least for a specified duration after an initial trigger. This is typically used to prevent a jarring user experience when showing or hiding certain elements. For example, it can be used to ensure that a loader remains visible for a certain amount of time, even when the related data has already been loaded.

Usage

#

      <div v-if="show('key-1', isLoading, minVisibleTime)">
        Loading...
      </div>
      <div v-else>
        Loaded!
      </div>
    

      import useKShow from 'kolibri-design-system/lib/composables/useKShow';

      export default {
        setup() {
          const { show } = useKShow();
          return { show };
        }
      };
    

Example

#

This is a simulation of a typical use-case of showing a loader while fetching data. You can set your own fetch request length and minimum visible time, and then hit the fetch button to see the output.

      <KTransition kind="component-fade-out-in">
        <KCircularLoader
          v-if="show('key-1', isFetching, minVisibleTime )"  
        />
        <div v-else>
          Loaded!
        </div>
      </KTransition>
    

Related

#

• Some components offer a simpler interfance to achieve the same effect when there is no need to be switching between more components. For example, see KCircularLoader's minVisibleTime.

Parameters

#

Returns

#

Type: boolean

Description: Returns true after shouldShow becomes truthy and keeps returning true for the duration of minVisibleTime (even when shouldShow changes back to falsy meanwhile). After minVisibleTime elapses and when shouldShow is falsy already, it returns false.